@ditari/bsui 1.0.2 → 1.0.4

package/dist/esm/components/menu/Menu.esm.js

@@ -0,0 +1,71 @@
+import { defineComponent as y, inject as C, ref as d, createVNode as n, resolveComponent as l, isVNode as K, Fragment as s, withDirectives as M, vShow as j, h as k } from "vue";
+import { storeToRefs as N } from "pinia";
+import "@ant-design/icons-vue";
+import { useMenuStore as w } from "../../store/modules/Menu.esm.js";
+import { useSettingsStore as I } from "../../store/modules/Settings.esm.js";
+function D(o) {
+  return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !K(o);
+}
+const _ = /* @__PURE__ */ y({
+  name: "DMenu",
+  setup() {
+    const {
+      componentName: o,
+      prop: H
+    } = C("menuIcon"), {
+      list: p
+    } = w(), f = I(), {
+      getCollapsed: m
+    } = N(f), c = d(["/labelList", "/label"]), i = d(["/label"]), v = ({
+      item: e,
+      key: t,
+      keyPath: r
+    }) => {
+      console.log(e, t, r), c.value = r, i.value = [t];
+    }, h = (e) => n(s, null, [n(l("a-menu-item"), {
+      key: e.url
+    }, {
+      icon: () => u(e),
+      default: () => e.title
+    })]), b = ["anticon", "anticon-menu", "ant-menu-item-icon"], u = (e) => n(s, null, [e.icon ? S(e.icon) : M(n("div", {
+      className: b
+    }, [e.title.substring(0, 1)]), [[j, m.value]])]), S = (e) => o === "nativeHtml" ? n("span", {
+      innerHTML: e
+    }, null) : k(l(o), {
+      prop: e
+    }), a = (e) => n(s, null, [n(l("a-sub-menu"), {
+      key: e.url
+    }, {
+      title: () => e.title,
+      icon: () => u(e),
+      default: () => e.children.map(
+        (t) => !t.children || t.children.length === 0 ? g(t) : a(t)
+        // 递归调用
+      )
+    })]), g = (e) => n(s, null, [n(l("a-menu-item"), {
+      key: e.url
+    }, {
+      default: () => e.title
+    })]);
+    return () => {
+      let e;
+      return n(l("a-menu"), {
+        mode: "inline",
+        theme: "dark",
+        openKeys: c.value,
+        "onUpdate:openKeys": (t) => c.value = t,
+        selectedKeys: i.value,
+        "onUpdate:selectedKeys": (t) => i.value = t,
+        onClick: v
+      }, D(e = p.map((t) => {
+        var r;
+        return !t.children || ((r = t.children) == null ? void 0 : r.length) === 0 ? h(t) : a(t);
+      })) ? e : {
+        default: () => [e]
+      });
+    };
+  }
+});
+export {
+  _ as default
+};

package/dist/esm/store/modules/User.d.ts

@@ -1,15 +1,21 @@
-export declare const useUserStore: import("pinia").StoreDefinition<string, {
-    token: undefined;
-}, {
+export interface State {
+    token: string | undefined;
+    userInfo: any;
+}
+export declare const useUserStore: import("pinia").StoreDefinition<string, State, {
     getToken: (state: {
-        token: undefined;
-    } & import("pinia").PiniaCustomStateProperties<{
-        token: undefined;
-    }>) => undefined;
+        token: string | undefined;
+        userInfo: any;
+    } & import("pinia").PiniaCustomStateProperties<State>) => string | undefined;
+    getUserInfo: (state: {
+        token: string | undefined;
+        userInfo: any;
+    } & import("pinia").PiniaCustomStateProperties<State>) => any;
 }, {
     /**
      * 保存token
      * @param token
      */
-    saveToken(token: any): void;
+    saveToken(token: string): void;
+    saveUserInfo(data: any): void;
 }>;

package/dist/esm/store/modules/User.esm.js

@@ -1,12 +1,13 @@
-import { defineStore as t } from "pinia";
-import { USER_ID as o } from "../types.esm.js";
-const s = t(o, {
+import { defineStore as o } from "pinia";
+import { USER_ID as t } from "../types.esm.js";
+const n = o(t, {
   state: () => ({
-    // token
-    token: void 0
+    token: void 0,
+    userInfo: void 0
   }),
   getters: {
-    getToken: (e) => e.token
+    getToken: (e) => e.token,
+    getUserInfo: (e) => e.userInfo
   },
   actions: {
     /**
@@ -15,9 +16,13 @@ const s = t(o, {
      */
     saveToken(e) {
       this.token = e;
+    },
+    saveUserInfo(e) {
+      this.userInfo = e;
     }
-  }
+  },
+  persist: !0
 });
 export {
-  s as useUserStore
+  n as useUserStore
 };

package/dist/esm/style.css

@@ -1 +1 @@
-.ditari-ant-back-top{right:4px;bottom:120px}.ditari-layout{height:100%}.ditari-layout .ditari-layout-sider{position:fixed;left:0;top:0;bottom:0;z-index:1}.ditari-layout .ditari-top-layout{position:fixed;left:200px;right:0;z-index:210}.ditari-layout .ditari-layout-content{margin-left:200px;margin-top:84px}.fade-enter-active,.fade-leave-active{transition:opacity .1s ease}.fade-enter-from,.fade-leave-to{opacity:0}.main-enter-active{transition:.2s}.main-leave-active{transition:.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 .ditari-layout-header-left{display:flex;justify-content:center}.ditari-layout-header .ditari-layout-header-left .ditari-side-collapsed{margin-right:20px;cursor:pointer;width:42px;line-height:30px;text-align:center;transition-duration:.2s}.ditari-layout-header .ditari-layout-header-left .ditari-side-collapsed:hover{background-color:#f0f2f5;border-radius:4px}.ditari-layout-header .ditari-layout-header-left .ditari-side-collapsed .icon{transition-duration:.2s}.ditari-user-menu{display:flex;align-items:center;height:100%}.ditari-user-menu .ditari-operation-items{margin-left:10px;height:100%}.ditari-user-menu .ditari-operation-items .ant-dropdown-link{display:flex;align-items:center;justify-content:center;height:100%}.collapsed-animation{transform:rotate(-180deg)}.ditari-list-layout{padding:20px;height:100%}.ditari-list-layout .wrapper{display:flex;flex-direction:column}.ditari-list-layout .ditari-list-table{flex:1}.ditari-list-layout .ditari-list-table .ant-card-body{display:flex;flex-direction:column;height:100%}.ditari-list-layout .ditari-list-form .ant-card-body{padding-bottom:0}.ditari-list-layout .wrapper{height:100%}.ditari-show-layout{position:relative}.ditari-show-layout .ant-card{margin-bottom:10px}.ditari-show-layout .ant-card .ant-card-head{padding:10px 24px}.ditari-show-layout .ant-card .ant-card-head .ant-card-head-title{padding:0}.ditari-show-layout .ant-card:last-child{margin-bottom:0}.ditari-show-layout .ditari-page-header{position:sticky;top:84px;z-index:1;padding:4px 24px;transition:all .3s}.ditari-show-layout .ditari-page-header.active{box-shadow:1px 5px 20px 2px #e0e0e0}.ditari-show-layout .ditari-show-footer{position:fixed;right:0;bottom:0;left:200px;padding:10px;background:#fff;box-shadow:0 0 5px 3px #e0e0e0}.ditari-nav{background:#f0f2f5}.ditari-nav .ant-tabs-nav{margin:0}.ditari-nav .ant-tabs-content-holder{display:none}.ditari-nav .ant-tabs-tab{position:relative;margin-left:0!important;border:0!important;transition:none!important;border-radius:10px 10px 0 0!important}.ditari-nav .ant-tabs-tab:not(.ant-tabs-tab-active){background:transparent}.ditari-nav .ant-tabs-tab:hover:not(.ant-tabs-tab-active){background:#e9e9e9}.ditari-nav .ant-tabs-tab .ant-tabs-tab-btn{display:flex;align-items:center}.ditari-nav .ant-tabs-tab .anticon{margin-right:0;margin-left:20px}.ditari-nav .ant-tabs-tab .anticon:hover{font-weight:700}.ditari-nav .ant-tabs-nav-wrap{padding:4px 8px 0}.ditari-nav .ant-tabs-tab:before,.ditari-nav .ant-tabs-tab:after{position:absolute;bottom:0;content:"";width:20px;height:20px;border-radius:100%;box-shadow:0 0 0 40px transparent}.ditari-nav .ant-tabs-tab:before{left:-20px;clip-path:inset(50% -10px 0 50%)}.ditari-nav .ant-tabs-tab:after{right:-20px;clip-path:inset(50% 50% 0 -10px)}.ditari-nav .ant-tabs-tab:hover:before,.ditari-nav .ant-tabs-tab:hover:after{box-shadow:0 0 0 30px #e9e9e9}.ditari-nav .ant-tabs-tab.ant-tabs-tab-active:before,.ditari-nav .ant-tabs-tab.ant-tabs-tab-active:after{z-index:10;box-shadow:0 0 0 30px #fff}.ditari-nav .tab-item-dividers{position:absolute;z-index:0;height:14px;top:50%;left:0;right:0;margin-top:-7px}.ditari-nav .tab-item-dividers:before{content:"";display:block;position:absolute;top:0;left:1px;bottom:0;width:1px;opacity:1;background-color:red;transition:opacity .2s ease,background-color .3s;z-index:2}.xi-pagination{margin-top:24px;text-align:center}.ditari-breadcrumb .ant-breadcrumb-separator{display:none}.ditari-breadcrumb .breadcrumb{display:flex}.ditari-breadcrumb .breadcrumb .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%)}.ditari-breadcrumb .breadcrumb .breadcrumb-item: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%)}.ditari-breadcrumb .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 .25s}.breadcrumb-enter-from,.breadcrumb-leave-active{opacity:0;transform:translate(30px) skew(-50deg)}
+.xi-pagination{margin-top:24px;text-align:center}

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,9 +1,9 @@
 {
   "name": "@ditari/bsui",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "files": [
-    "dist/**",
-    "src/**"
+    "dist",
+    "src"
   ],
   "private": false,
   "publishConfig": {
@@ -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);
 };