@ditari/bsui 1.0.2 → 1.0.4

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>

package/src/components/layout/Main.vue

@@ -11,7 +11,7 @@ import DNavTabs from "./NavTabs.vue";
 //面包屑组件
 import DBreadcrumb from "./Breadcrumb.vue";
 // 菜单组件
-import Menu from "./Menu";
+import Menu from "../menu/Menu";
 
 // 缓存store
 const store = useKeepAliveStore();
@@ -84,104 +84,4 @@ export default {
   </a-layout>
   <a-back-top class="ditari-ant-back-top" :visibilityHeight="50"></a-back-top>
 </template>
-<style lang="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);
-}
-</style>
+<style lang="scss"></style>

package/src/components/layout/NavTabs.vue

@@ -87,106 +87,17 @@ export default {
     <a-tabs v-model:activeKey="activeKey" type="card" @tabClick="onClick">
       <a-tab-pane v-for="item in navTabs" :key="item.path">
         <template #tab>
+          <div class="tab-dividers"></div>
           <div class="tab-item" :class="{ active: activeKey === item.path }">
             {{ item.meta.title }}
           </div>
-          <CloseOutlined @click="onClose($event, item.fullPath)" />
+          <CloseOutlined
+            v-if="!item.meta?.keepOpen"
+            @click="onClose($event, item.fullPath)"
+          />
         </template>
       </a-tab-pane>
     </a-tabs>
   </div>
 </template>
-<style lang="scss">
-.ditari-nav {
-  background: #f0f2f5;
-  .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;
-    &:not(.ant-tabs-tab-active) {
-      background: transparent;
-    }
-    &:hover {
-      &:not(.ant-tabs-tab-active) {
-        background: #e9e9e9;
-      }
-    }
-
-    .ant-tabs-tab-btn {
-      display: flex;
-      align-items: center;
-    }
-    .anticon {
-      margin-right: 0;
-      margin-left: 20px;
-      &:hover {
-        font-weight: bold;
-      }
-    }
-  }
-  .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 #e9e9e9;
-  }
-
-  .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-item-dividers {
-    position: absolute;
-    z-index: 0;
-    height: 14px;
-    top: 50%;
-    left: 0;
-    right: 0;
-    margin-top: -7px;
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 1px;
-      bottom: 0;
-      width: 1px;
-      opacity: 1;
-      background-color: red;
-      transition: opacity 0.2s ease, background-color 0.3s;
-      z-index: 2;
-    }
-  }
-}
-</style>
+<style lang="scss"></style>

package/src/components/layout/Show.vue

@@ -116,42 +116,4 @@ export default {
     </a-spin>
   </div>
 </template>
-<style lang="scss">
-$box-shadow-color: #e0e0e0;
-.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;
-  }
-}
-</style>
+<style lang="scss"></style>

package/src/components/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/src/components/layout/style/index.scss

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

package/src/components/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/src/components/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/src/components/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;
+    }
+  }
+}