@ditari/bsui 1.1.47 → 5.0.1

package/src/layout/style/index.scss

@@ -1,35 +0,0 @@
-
-@import "./breadcrumb";
-@import "./list";
-@import "./main";
-@import "./navtab";
-@import "./show";
-@import "./fuckmain";
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.1s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.main-enter-active {
-  transition: 0.2s;
-}
-
-.main-leave-active {
-  transition: 0.15s;
-}
-
-.main-enter-from {
-  opacity: 0;
-  margin-left: -20px;
-}
-
-.main-leave-to {
-  opacity: 0;
-  margin-left: 20px;
-}

package/src/layout/style/list.scss

@@ -1,26 +0,0 @@
-@import "../../theme/variable.scss";
-.ditari-list-layout {
-  padding: 20px;
-  height: 100%;
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-  .ditari-list-table {
-    flex: 1;
-    .ant-card-body {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-  }
-  .ditari-list-form {
-    .ant-card-body {
-      padding-bottom: 0;
-    }
-  }
-
-  .wrapper {
-    height: 100%;
-  }
-}

package/src/layout/style/main.scss

@@ -1,74 +0,0 @@
-@import "../../theme/variable.scss";
-.ditari-ant-back-top {
-  right: 4px;
-  bottom: 120px;
-}
-.ditari-layout {
-  height: 100%;
-  .ditari-layout-sider {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    z-index: 1;
-  }
-  .ditari-top-layout {
-    position: fixed;
-    left: 200px;
-    right: 0;
-    z-index: 210;
-  }
-  .ditari-layout-content {
-    margin-left: 200px;
-    margin-top: 84px;
-  }
-}
-
-
-.ditari-layout-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 15px;
-  height: 42px;
-  border-bottom: 1px solid #f0f2f5;
-  background-color: #fff;
-  .ditari-layout-header-left {
-    display: flex;
-    justify-content: center;
-    .ditari-side-collapsed {
-      margin-right: 20px;
-      cursor: pointer;
-      width: 42px;
-      line-height: 30px;
-      text-align: center;
-      transition-duration: 0.2s;
-      &:hover {
-        background-color: #f0f2f5;
-        border-radius: 4px;
-      }
-      .icon {
-        transition-duration: 0.2s;
-      }
-    }
-  }
-}
-.ditari-user-menu {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  .ditari-operation-items {
-    margin-left: 10px;
-    height: 100%;
-    .ant-dropdown-link {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-    }
-  }
-}
-
-.collapsed-animation {
-  transform: rotate(-180deg);
-}

package/src/layout/style/navtab.scss

@@ -1,146 +0,0 @@
-@import "../../theme/variable.scss";
-
-/*分割线*/
-@mixin tab-dividers {
-  .tab-dividers {
-    &::before {
-      opacity: 0;
-    }
-  }
-}
-
-.#{$prefix-name}-nav {
-  display: flex;
-  background: $nav-tab-bg-color;
-  .ant-tabs-nav {
-    margin: 0;
-  }
-  .ant-tabs-content-holder {
-    display: none;
-  }
-  .ant-tabs-nav-list{
-    padding-right: 30px;
-  }
-
-  .ant-tabs-tab {
-    position: relative;
-    margin-left: 0 !important;
-    border: 0 !important;
-    transition: none !important;
-    border-radius: 10px 10px 0 0 !important;
-    color: $nav-tab-text-color;
-    &:first-child,
-    &.ant-tabs-tab-active {
-      .tab-dividers {
-        &::before {
-          opacity: 0;
-        }
-      }
-
-    }
-
-    &.ant-tabs-tab-active {
-      // 标签激活时的背景色
-      background-color: $nav-tab-active-bg-color;
-      .tab-item{
-        color:  $nav-tab-active-txt-color;
-      }
-    }
-
-    &:not(.ant-tabs-tab-active) {
-      background: transparent;
-    }
-    &:hover {
-      &:not(.ant-tabs-tab-active) {
-        background: $nav-tab-hover-bg-color;
-        @include tab-dividers;
-        & + .ant-tabs-tab {
-          @include tab-dividers;
-        }
-      }
-    }
-    .ant-tabs-tab-btn {
-      display: flex;
-      align-items: center;
-    }
-    .tab-close {
-      padding: 4px;
-      margin-left: 10px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-
-      &:hover {
-        background-color: $nav-tab-close-hover-bg-color;
-        color: $nav-tab-close-hover-color;
-      }
-      .anticon {
-        margin: 0;
-      }
-    }
-  }
-  .ant-tabs-tab-active + .ant-tabs-tab {
-    @include tab-dividers;
-  }
-
-  .ant-tabs-nav-wrap {
-    padding: 4px 8px 0;
-  }
-
-  // 去除下边框
-  .ant-tabs-nav::before{
-    border-bottom-width: 0;
-  }
-
-  .ant-tabs-tab::before,
-  .ant-tabs-tab::after {
-    position: absolute;
-    bottom: 0;
-    content: "";
-    width: 20px;
-    height: 20px;
-    border-radius: 100%;
-    box-shadow: 0 0 0 40px transparent;
-  }
-  .ant-tabs-tab::before {
-    left: -20px;
-    clip-path: inset(50% -10px 0 50%);
-  }
-  .ant-tabs-tab::after {
-    right: -20px;
-    clip-path: inset(50% 50% 0 -10px);
-  }
-
-  .ant-tabs-tab:hover::before,
-  .ant-tabs-tab:hover::after {
-    box-shadow: 0 0 0 30px $nav-tab-hover-bg-color;
-  }
-
-  .ant-tabs-tab.ant-tabs-tab-active::before,
-  .ant-tabs-tab.ant-tabs-tab-active::after {
-    z-index: 10;
-    box-shadow: 0 0 0 30px $nav-tab-active-bg-color;
-  }
-
-  .tab-dividers {
-    position: absolute;
-    z-index: 0;
-    height: 14px;
-    top: 50%;
-    left: 0;
-    margin-top: -7px;
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 1px;
-      bottom: 0;
-      width: 1px;
-      opacity: 1;
-      background-color: $nav-tab-dividers-color;
-      transition: opacity 0.2s ease, background-color 0.3s;
-    }
-  }
-}

package/src/layout/style/show.scss

@@ -1,50 +0,0 @@
-@import "../../theme/variable.scss";
-.ditari-show-layout {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  height: 100%;
-  .ant-card {
-    margin-bottom: 10px;
-    .ant-card-head {
-      padding: 10px 24px;
-      .ant-card-head-title {
-        padding: 0;
-      }
-    }
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-  .ditari-page-header {
-    position: sticky;
-    top: $show-header-top;
-    z-index: 10;
-    padding: 4px 24px;
-    transition: all 0.3s;
-    &.active {
-      box-shadow: 7px 12px 20px 0 $box-shadow-color;
-    }
-  }
-  .ant-spin-nested-loading {
-    flex: 1;
-    .ant-spin-container {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-  }
-  .ditari-show-content {
-    flex: 1;
-  }
-  .ditari-show-footer {
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    left: 200px;
-    z-index: 10;
-    padding: 10px;
-    background: #fff;
-    box-shadow: 4px -2px 5px 3px $box-shadow-color;
-  }
-}

package/src/menu/Menu.tsx

@@ -1,181 +0,0 @@
-import { defineComponent, h, inject, resolveComponent, watch } from "vue";
-import { useRouter, useRoute } from "vue-router";
-
-import { storeToRefs } from "pinia";
-
-import { useMenuStore, useSettingsStore } from "@ditari/store";
-
-export default defineComponent({
-  name: "DMenu",
-  setup() {
-    const router = useRouter();
-    const route = useRoute();
-    const { componentName, prop: menuProp } = inject("menuIcon") as any;
-    // 菜单store
-    const menuStore = useMenuStore();
-    const { list, openMenusKeys, selectedMenuKeys } = storeToRefs(menuStore);
-    // 设置store
-    const settingsStore = useSettingsStore();
-    const { getCollapsed } = storeToRefs(settingsStore) as any;
-
-    // watchEffect(() => {
-    //   if (getCollapsed.value) {
-    //     // 如果菜单是收缩的状态，则不匹配激活的菜单
-    //     // 否则 在切换标签的时候，收缩菜单会自动激活悬浮的动作
-    //     return;
-    //   }
-    //   // 会被触发两次
-    //   // 当前激活的url
-    //   const activatedUrl =
-    //     selectedMenuKeys.value.length > 0 ? selectedMenuKeys.value[0] : "";
-    //   const parentUrls = getParentUrls(list.value, activatedUrl);
-    //   openMenusKeys.value = parentUrls || [];
-    // });
-
-    watch(
-      () => selectedMenuKeys.value,
-      (newValue: any) => {
-        if (getCollapsed.value) {
-          // 如果菜单是收缩的状态，则不匹配激活的菜单
-          // 否则 在切换标签的时候，收缩菜单会自动激活悬浮的动作
-          return;
-        }
-        const activatedUrl = newValue.length > 0 ? newValue[0] : "";
-        const parentUrls = getParentUrls(list.value, activatedUrl);
-        openMenusKeys.value = parentUrls || [];
-      },
-      {
-        deep: true
-      }
-    );
-
-    function getParentUrls(menus: any, url: any) {
-      for (let i = 0; i < menus.length; i++) {
-        if (menus[i].url === url || url.startsWith(menus[i].url)) {
-          // 如果当前菜单项的url与传入的url相等，说明找到了当前菜单项
-          return [menus[i].url];
-        } else if (menus[i].children && menus[i].children.length > 0) {
-          // 如果当前菜单项有子菜单，则递归查找子菜单
-          const parentUrls: any = getParentUrls(menus[i].children, url);
-          if (parentUrls) {
-            // 如果子菜单中存在当前url，则将当前菜单项的url添加到返回结果中
-            return [menus[i].url, ...parentUrls];
-          }
-        }
-      }
-      return null;
-    }
-
-    /**
-     * 监听菜单点击事件
-     * @param item
-     * @param key
-     * @param keyPath
-     */
-    const onClick = ({ key, keyPath }: any) => {
-      openMenusKeys.value = keyPath;
-      selectedMenuKeys.value = [key];
-      // 判断目标路由和当前路由是否相等
-      // 不相等的时候再跳转
-      route.path !== key
-        ? router.push(key).then((r) => (r ? console.warn(r) : null))
-        : null;
-    };
-
-    // 渲染菜单
-    const renderMenu = (menu: any) => {
-      return (
-        <>
-          <a-menu-item key={menu.url}>
-            {{
-              icon: () => renderIcon(menu),
-              default: () => menu.title
-            }}
-          </a-menu-item>
-        </>
-      );
-    };
-
-    const iconClass = ["anticon", "anticon-menu", "ant-menu-item-icon"];
-    // 渲染图标
-    const renderIcon = (menu: any) => {
-      return (
-        <>
-          {!menu.icon ? (
-            <div v-show={getCollapsed.value} class={iconClass}>
-              {menu.title.substring(0, 1)}
-            </div>
-          ) : (
-            renderIconSwitch(menu.icon)
-          )}
-        </>
-      );
-    };
-
-    const renderIconSwitch = (icon: any) => {
-      if (componentName === "nativeHtml") {
-        return <span v-html={icon}></span>;
-      } else {
-        return h(resolveComponent(componentName), {
-          [`${menuProp}`]: icon
-        });
-      }
-    };
-
-    // 递归渲染子菜单
-    const renderSub = (menu: any) => {
-      return (
-        <>
-          <a-sub-menu key={menu.url}>
-            {{
-              title: () => menu.title,
-              icon: () => renderIcon(menu),
-              default: () => {
-                return menu.children.map(
-                  (item: any) =>
-                    !item.children || item.children.length === 0
-                      ? renderSubMenu(item)
-                      : renderSub(item) // 递归调用
-                );
-              }
-            }}
-          </a-sub-menu>
-        </>
-      );
-    };
-
-    // 递归下的子菜单
-    const renderSubMenu = (menu: any) => {
-      return (
-        <>
-          <a-menu-item key={menu.url}>
-            {{
-              default: () => menu.title
-            }}
-          </a-menu-item>
-        </>
-      );
-    };
-
-    return () => (
-      <>
-        <a-menu
-          mode="inline"
-          theme="dark"
-          v-model:openKeys={openMenusKeys.value}
-          v-model:selectedKeys={selectedMenuKeys.value}
-          onClick={onClick}
-        >
-          {list.value.map((menu: any) => {
-            if (!menu.children || menu.children?.length === 0) {
-              // 没有children属性或者children的长度等于0
-              return renderMenu(menu);
-            } else {
-              return renderSub(menu);
-            }
-          })}
-        </a-menu>
-      </>
-    );
-  }
-});

package/src/menu/style/index.scss

@@ -1,26 +0,0 @@
-@import "../../theme/variable.scss";
-
-.ditari-menu {
-  // 菜单高度 $logo-height 为logo的高度
-  height: calc(100vh - $logo-height - $footer-slogan);
-  overflow: scroll;
-  &::-webkit-scrollbar {
-    width: 0 !important;
-    display: none;
-  }
-}
-
-.ditari-layout-sider {
-  background-color: $side-bg-color;
-  .ant-menu-dark {
-    background-color: $side-bg-color;
-    .ant-menu-inline.ant-menu-sub {
-      background-color: $side-menu-sub-bg-color;
-    }
-    .ant-menu{
-      &:before,&:after{
-        //display: none;
-      }
-    }
-  }
-}

package/src/modal/Modal.tsx

@@ -1,83 +0,0 @@
-import { defineComponent, watchEffect, ref } from "vue";
-import { useWindowSize, useResizeObserver } from "@vueuse/core";
-
-import { Modal } from "ant-design-vue";
-import { prefixName } from "../theme";
-
-//class名字
-const baseClassName = `${prefixName}-modal`;
-export default defineComponent({
-  name: "DModal",
-  props: {
-    title: {
-      type: String,
-      default: ""
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    width: {
-      type: Number,
-      default: 800
-    },
-    destroyOnClose: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: ["update:visible"],
-  setup(props, { slots, emit }) {
-    const modalVisible = ref(true);
-    const maxHeight = ref(0);
-    watchEffect(() => {
-      modalVisible.value = props.visible;
-      // modal显示的时候 会自动添加宽度 禁止掉
-      document.body.style.width = "";
-    });
-
-    const contentStyle = ref<any>(undefined);
-    useResizeObserver(document.body, () => {
-      const { height } = useWindowSize();
-      maxHeight.value = height.value < 200 ? height.value : height.value - 200;
-      contentStyle.value = {
-        "max-height": maxHeight.value + "px"
-      };
-    });
-
-    const renderFooter = () => {
-      return slots.footer ? slots.footer && slots?.footer() : null;
-    };
-
-    const onCancel = () => {
-      emit("update:visible", modalVisible.value);
-    };
-
-    return () => (
-      <>
-        <Modal
-          v-model:visible={modalVisible.value}
-          title={props.title}
-          centered
-          mask-closable={false}
-          wrapClassName={baseClassName}
-          width={props.width}
-          destroyOnClose={props.destroyOnClose}
-          footer={renderFooter()}
-          onCancel={onCancel}
-        >
-          {{
-            default: () => (
-              <div
-                class={[`${baseClassName}-content`]}
-                style={contentStyle.value}
-              >
-                {slots.default && slots.default(maxHeight.value)}
-              </div>
-            )
-          }}
-        </Modal>
-      </>
-    );
-  }
-});

package/src/modal/index.ts

@@ -1,9 +0,0 @@
-import type { App } from "vue";
-import Modal from "./Modal";
-
-Modal.install = function (app: App) {
-  app.component(Modal.name, Modal);
-  return app;
-};
-
-export default Modal;

package/src/modal/style/index.scss

@@ -1,74 +0,0 @@
-@import "../../theme/variable.scss";
-
-.#{$prefix-name}-modal {
-  .ant-modal-body {
-    padding: 0;
-  }
-  .#{$prefix-name}-modal-content {
-    max-height: 200px;
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-      width: 0 !important;
-      display: none;
-    }
-  }
-}
-
-.ant-table.ant-table-bordered > .ant-table-container {
-  border-bottom: 1px solid #f0f0f0;
-}
-
-@media screen and (min-width: 320px) {
-  .modal {
-    font-size: 12px;
-  }
-}
-
-@media screen and (min-width: 640px) {
-  .modal {
-    font-size: 14px;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .modal {
-    font-size: 16px;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .modal {
-    font-size: 18px;
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .modal-sm {
-    width: 100%;
-    height: 100%;
-    min-width: 240px;
-    min-height: 160px;
-  }
-}
-
-@media screen and (min-width: 640px) and (max-width: 1024px) {
-  .modal-md {
-    margin: 100px auto;
-    max-width: 600px;
-    max-height: 480px;
-  }
-}
-
-@media screen and (min-width: 1024px) and (max-width: 1440px) {
-  .modal-lg {
-    margin: 100px auto;
-    max-width: 800px;
-    max-height: 600px;
-  }
-}
-
-@media screen and (min-width: 1440px) {
-  .modal-xl {
-    margin: 100px auto;
-  }
-}