@ditari/bsui 1.0.3 → 1.0.4

package/dist/style/index.scss

@@ -1,7 +1,7 @@
 @import "./theme/variable";
 @import "./grid/style";
 @import "./menu/style";
-
+@import "./layout/style";
 html,
 body,
 #app {
@@ -13,3 +13,4 @@ body,
   }
 }
 
+

package/dist/style/layout/style/breadcrumb.scss

@@ -0,0 +1,57 @@
+@import "../../theme/variable.scss";
+.ditari-breadcrumb {
+
+  .ant-breadcrumb-separator {
+    display: none;
+  }
+  .breadcrumb {
+    display: flex;
+
+    .breadcrumb-item {
+      &:first-child {
+        .breadcrumb-link {
+          border-radius: 6px 0 0 6px;
+          clip-path: polygon(
+            0 0,
+            calc(100% - 8px) 0,
+            100% 50%,
+            calc(100% - 8px) 100%,
+            0 100%
+          );
+        }
+      }
+      &:last-child {
+        &:not(:last-child) {
+          .breadcrumb-link {
+            border-radius: 0 6px 6px 0;
+            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
+          }
+        }
+      }
+    }
+  }
+
+  .breadcrumb-link {
+    display: block;
+    padding: 4px 12px;
+    background: #f0f2f5;
+    clip-path: polygon(
+      0 0,
+      calc(100% - 8px) 0,
+      100% 50%,
+      calc(100% - 8px) 100%,
+      0 100%,
+      8px 50%
+    );
+  }
+}
+
+.breadcrumb-enter-active {
+  transition: all 0.25s;
+}
+
+.breadcrumb-enter-from,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(30px) skewX(-50deg);
+}

package/dist/style/layout/style/index.scss

@@ -0,0 +1,6 @@
+
+@import "./breadcrumb";
+@import "./list";
+@import "./main";
+@import "./navtab";
+@import "./show";

package/dist/style/layout/style/list.scss

@@ -0,0 +1,26 @@
+@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/dist/style/layout/style/main.scss

@@ -0,0 +1,100 @@
+@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;
+  }
+}
+.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;
+}
+
+.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/dist/style/layout/style/navtab.scss

@@ -0,0 +1,118 @@
+@import "../../theme/variable.scss";
+
+/*分割线*/
+@mixin tab-dividers {
+  .tab-dividers {
+    &::before {
+      opacity: 0;
+    }
+  }
+}
+
+.ditari-nav {
+  background: $nav-tab-bg-color;
+  .ant-tabs-nav {
+    margin: 0;
+  }
+  .ant-tabs-content-holder {
+    display: none;
+  }
+  .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;
+        }
+      }
+    }
+    &: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;
+    }
+    .anticon {
+      margin-right: 0;
+      margin-left: 10px;
+      &:hover {
+        //color: red;
+      }
+    }
+  }
+  .ant-tabs-tab-active + .ant-tabs-tab {
+    @include tab-dividers;
+  }
+
+  .ant-tabs-nav-wrap {
+    padding: 4px 8px 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 #fff;
+  }
+
+  .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/dist/style/layout/style/show.scss

@@ -0,0 +1,37 @@
+@import "../../theme/variable.scss";
+.ditari-show-layout {
+  position: relative;
+  .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: 84px;
+    z-index: 1;
+    padding: 4px 24px;
+    transition: all 0.3s;
+    &.active {
+      box-shadow: 1px 5px 20px 2px $box-shadow-color;
+    }
+  }
+  .ditari-show-content {
+  }
+  .ditari-show-footer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 200px;
+    padding: 10px;
+    background: #fff;
+    box-shadow: 0px 0px 5px 3px $box-shadow-color;
+  }
+}

package/dist/style/menu/style/index.scss

@@ -10,9 +10,17 @@
   }
 }
 
-.ditari-layout {
-  background-color: red;
-  .ditari-layout-sider {
-    background-color: red;
+.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/dist/style/theme/variable.scss

@@ -6,16 +6,33 @@ $bg-color: #f0f2f5;
 $logo-height: 240px !default;
 /******======网格变量======******/
 //网格边框颜色
-$grid-border-color: #4e4e4e;
+$grid-border-color: #4e4e4e !default;
 // 网格里面输入框获取焦点时的边框颜色
-$grid-input-focus-border-color: #1890ff;
+$grid-input-focus-border-color: #1890ff !default;
 //输入框校验不通过时候的颜色
-$grid-input-error-border-color: #ff4d4f;
+$grid-input-error-border-color: #ff4d4f !default;
 // 网格输入框边框宽度
-$grid-input-border-width: 2px;
+$grid-input-border-width: 2px !default;
 // 网格边框宽度
-$gird-border-width: 1px;
+$gird-border-width: 1px !default;
 
+// show头部阴影
+$box-shadow-color: #e0e0e0 !default;
+
+/******======左侧菜单======******/
 // 左侧菜单
-$top-header-height: 84px;
+
 $logo-height: 40px !default;
+//左侧菜单北京颜色
+$side-bg-color: #162157 !default;
+//子菜单展开后的背景颜色
+$side-menu-sub-bg-color: #101847 !default;
+
+/******======多标签======******/
+$nav-tab-bg-color: linear-gradient(270deg, #019cfe 0%, #0165fe 100%) !default;
+//分割符颜色
+$nav-tab-dividers-color: #fff !default;
+// 字体颜色
+$nav-tab-text-color: #fff !default;
+// 悬浮的背景色
+$nav-tab-hover-bg-color: #065de1 !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditari/bsui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "files": [
     "dist",
     "src"
@@ -27,5 +27,9 @@
     },
     "./css/*": "./dist/css/*",
     "./theme/*": "./dist/style/*"
+  },
+  "devDependencies": {
+    "@ant-design/icons-vue": "^6.1.0",
+    "ant-design-vue": "^3.2.15"
   }
 }

package/src/components/index.scss

@@ -1,7 +1,7 @@
 @import "./theme/variable";
 @import "./grid/style";
 @import "./menu/style";
-
+@import "./layout/style";
 html,
 body,
 #app {
@@ -13,3 +13,4 @@ body,
   }
 }
 
+

package/src/components/index.ts

@@ -5,15 +5,22 @@ import { createPersistedState } from "pinia-plugin-persistedstate";
 import * as components from "./components";
 export * from "./components";
 
+export interface MenuIcon {
+  componentName: string | "nativeHtml";
+  type: string;
+}
+export interface Options {
+  menuIcon: MenuIcon;
+  prop: string;
+}
 const c: any = components;
-export const install = function (app: App, opts: any) {
+export const install = function (app: App, opts: Options) {
   Object.keys(c).forEach((key) => {
     const component = c[key];
     if (component.install) {
       app.use(component);
     }
   });
-
   //注册pinia
   const pinia = createPinia();
   //pinia启用持久化
@@ -23,6 +30,7 @@ export const install = function (app: App, opts: any) {
     })
   );
   app.use(pinia);
+  app.provide("menuIcon", opts.menuIcon);
   console.log("options", opts);
 };
 

package/src/components/layout/Breadcrumb.vue

@@ -39,81 +39,5 @@ export default {
   </div>
 </template>
 <style lang="scss">
-.ditari-breadcrumb {
-  .ant-breadcrumb-separator {
-    display: none;
-  }
-  .breadcrumb {
-    display: flex;
 
-    .breadcrumb-item {
-      &:first-child {
-        .breadcrumb-link {
-          border-radius: 6px 0 0 6px;
-          clip-path: polygon(
-            0 0,
-            calc(100% - 8px) 0,
-            100% 50%,
-            calc(100% - 8px) 100%,
-            0 100%
-          );
-        }
-      }
-      &:last-child {
-        &:not(:last-child) {
-          .breadcrumb-link {
-            border-radius: 0 6px 6px 0;
-            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
-          }
-        }
-      }
-    }
-    //&:first-child {
-    //  &:not(:last-child) {
-    //    .ant-breadcrumb-link {
-    //      border-radius: 6px 0 0 6px;
-    //      clip-path: polygon(
-    //        0 0,
-    //        calc(100% - 8px) 0,
-    //        100% 50%,
-    //        calc(100% - 8px) 100%,
-    //        0 100%
-    //      );
-    //    }
-    //  }
-    //}
-    //&:last-child {
-    //  &:not(:first-child) {
-    //    .ant-breadcrumb-link {
-    //      border-radius: 6px 0 0 6px;
-    //      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
-    //    }
-    //  }
-    //}
-  }
-
-  .breadcrumb-link {
-    display: block;
-    padding: 4px 12px;
-    background: #f0f2f5;
-    clip-path: polygon(
-      0 0,
-      calc(100% - 8px) 0,
-      100% 50%,
-      calc(100% - 8px) 100%,
-      0 100%,
-      8px 50%
-    );
-  }
-}
-
-.breadcrumb-enter-active {
-  transition: all 0.25s;
-}
-
-.breadcrumb-enter-from,
-.breadcrumb-leave-active {
-  opacity: 0;
-  transform: translateX(30px) skewX(-50deg);
-}
 </style>

package/src/components/layout/List.vue

@@ -130,30 +130,4 @@ export default {
     </div>
   </div>
 </template>
-<style lang="less">
-.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%;
-  }
-}
-</style>
+<style></style>