@ditari/bsui 1.0.2 → 1.0.4

package/src/components/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/src/components/{layout/Menu.jsx → menu/Menu-bak.jsx}

@@ -1,5 +1,5 @@
 import { defineComponent, h, ref, resolveComponent } from "vue";
-import { useMenuStore } from "../../store/modules/Menu";
+import { useMenuStore } from "../../store";
 
 export default defineComponent({
   name: "DMenu",
@@ -53,43 +53,45 @@ export default defineComponent({
     return () => (
       <a-menu
         mode="inline"
+        theme="dark"
         v-model:openKeys={openKeys.value}
         v-model:selectedKeys={selectedKeys.value}
         onClick={onClick}
       >
-        {list.map((menu) => (
-          <a-sub-menu key={menu.url}>
-            {{
-              title: () => <>{menu.title}</>,
-              icon: () => (
-                <>
-                  <span>
-                    {menu.icon ? h(resolveComponent(menu.icon)) : undefined}
-                  </span>
-                </>
-              ),
-              default: () => {
-                if (menu.children && menu.children.length) {
-                  return menu.children.map((child) => {
-                    return (
-                      <>
-                        {child.children ? (
-                          renderSubMenu(child.children, menu)
-                        ) : (
-                          <a-menu-item key={child.url}>
-                            {child.title}
-                          </a-menu-item>
-                        )}
-                      </>
-                    );
-                  });
-                } else {
-                  return <>无子标签</>;
-                }
-              }
-            }}
-          </a-sub-menu>
-        ))}
+        {list.map((menu) => {
+          menu.children.length === 0 ? <>ok</> : <>ww</>;
+        })}
+        {/*{list.map((menu) => (*/}
+        {/*  <a-sub-menu key={menu.url}>*/}
+        {/*    {{*/}
+        {/*      title: () => <>{menu.title}</>,*/}
+        {/*      icon: () => (*/}
+        {/*        <>*/}
+        {/*          <span>*/}
+        {/*            {menu.icon ? h(resolveComponent(menu.icon)) : undefined}*/}
+        {/*          </span>*/}
+        {/*        </>*/}
+        {/*      ),*/}
+        {/*      default: () => {*/}
+        {/*        if (menu.children && menu.children.length) {*/}
+        {/*          return menu.children.map((child) => {*/}
+        {/*            return (*/}
+        {/*              <>*/}
+        {/*                {child.children ? (*/}
+        {/*                  renderSubMenu(child.children, menu)*/}
+        {/*                ) : (*/}
+        {/*                  <a-menu-item key={child.url}>*/}
+        {/*                    {child.title}*/}
+        {/*                  </a-menu-item>*/}
+        {/*                )}*/}
+        {/*              </>*/}
+        {/*            );*/}
+        {/*          });*/}
+        {/*        }*/}
+        {/*      }*/}
+        {/*    }}*/}
+        {/*  </a-sub-menu>*/}
+        {/*))}*/}
       </a-menu>
     );
   }

package/src/components/menu/Menu.jsx

@@ -1,10 +1,18 @@
-import { defineComponent, h, ref, resolveComponent } from "vue";
-import { useMenuStore } from "../../store";
+import { defineComponent, h, inject, ref, resolveComponent } from "vue";
+import { storeToRefs } from "pinia";
+import { MenuOutlined } from "@ant-design/icons-vue";
+
+import { useMenuStore } from "../../store/modules/Menu";
+import { useSettingsStore } from "../../store/modules/Settings";
 
 export default defineComponent({
   name: "DMenu",
   setup() {
+    const { componentName, prop } = inject("menuIcon");
     const { list } = useMenuStore();
+    const settingsStore = useSettingsStore();
+
+    const { getCollapsed } = storeToRefs(settingsStore);
     // 当前展开的菜单
     const openKeys = ref(["/labelList", "/label"]);
     // 当前选中的菜单
@@ -30,64 +38,97 @@ export default defineComponent({
       console.log(keys);
     };
 
-    // 递归渲染子菜单
-    const renderSubMenu = (menuList, parent) => {
-      if (!menuList || !menuList.length) {
-        return null;
+    // 渲染菜单
+    const renderMenu = (menu) => {
+      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) => {
+      return (
+        <>
+          {!menu.icon ? (
+            <div v-show={getCollapsed.value} className={iconClass}>
+              {menu.title.substring(0, 1)}
+            </div>
+          ) : (
+            renderIconSwitch(menu.icon)
+          )}
+        </>
+      );
+    };
+
+    const renderIconSwitch = (icon) => {
+      if (componentName === "nativeHtml") {
+        return <span v-html={icon}></span>;
+      } else {
+        return h(resolveComponent(componentName), {
+          prop: icon
+        });
       }
+    };
 
+    // 递归渲染子菜单
+    const renderSub = (menu) => {
       return (
-        <a-sub-menu>
-          {{
-            title: () => parent.title,
-            default: () => {
-              return menuList.map((menu) => (
-                <a-menu-item key={menu.url}>{menu.title}</a-menu-item>
-              ));
-            }
-          }}
-        </a-sub-menu>
+        <>
+          <a-sub-menu key={menu.url}>
+            {{
+              title: () => menu.title,
+              icon: () => renderIcon(menu),
+              default: () => {
+                return menu.children.map(
+                  (item) =>
+                    !item.children || item.children.length === 0
+                      ? renderSubMenu(item)
+                      : renderSub(item) // 递归调用
+                );
+              }
+            }}
+          </a-sub-menu>
+        </>
+      );
+    };
+
+    // 递归下的子菜单
+    const renderSubMenu = (menu) => {
+      return (
+        <>
+          <a-menu-item key={menu.url}>
+            {{
+              default: () => menu.title
+            }}
+          </a-menu-item>
+        </>
       );
     };
 
     return () => (
       <a-menu
         mode="inline"
+        theme="dark"
         v-model:openKeys={openKeys.value}
         v-model:selectedKeys={selectedKeys.value}
         onClick={onClick}
       >
-        {list.map((menu) => (
-          <a-sub-menu key={menu.url}>
-            {{
-              title: () => <>{menu.title}</>,
-              icon: () => (
-                <>
-                  <span>{menu.icon ? h(resolveComponent(menu.icon)) : undefined}</span>
-                </>
-              ),
-              default: () => {
-                if (menu.children && menu.children.length) {
-                  return menu.children.map((child) => {
-                    return (
-                      <>
-                        {child.children ? (
-                          renderSubMenu(child.children, menu)
-                        ) : (
-                          <a-menu-item key={child.url}>
-                            {child.title}
-                          </a-menu-item>
-                        )}
-                      </>
-                    );
-                  });
-                } else {
-                  return <>无子标签</>;
-                }
-              }
-            }}
-          </a-sub-menu>
-        ))}
+        {list.map((menu) => {
+          if (!menu.children || menu.children?.length === 0) {
+            // 没有children属性或者children的长度等于0
+            return renderMenu(menu);
+          } else {
+            return renderSub(menu);
+          }
+        })}
       </a-menu>
     );
   }

package/src/components/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/src/components/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/src/store/modules/User.ts

@@ -1,23 +1,30 @@
 import { defineStore } from "pinia";
 import { USER_ID } from "../types";
 
+export interface State {
+  token: string | undefined;
+  userInfo: any;
+}
 export const useUserStore = defineStore(USER_ID, {
-  state: () => {
-    return {
-      // token
-      token: undefined
-    };
-  },
+  state: (): State => ({
+    token: undefined,
+    userInfo: undefined
+  }),
   getters: {
-    getToken: (state) => state.token
+    getToken: (state) => state.token,
+    getUserInfo: (state) => state.userInfo
   },
   actions: {
     /**
      * 保存token
      * @param token
      */
-    saveToken(token: any) {
+    saveToken(token: string) {
       this.token = token;
+    },
+    saveUserInfo(data: any) {
+      this.userInfo = data;
     }
-  }
+  },
+  persist: true
 });

package/dist/cjs/components/layout/Breadcrumb.vue.cjs3.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Breadcrumb.vue.cjs.js");require("./Breadcrumb.vue.cjs2.js");exports.default=e.default;

package/dist/cjs/components/layout/List.vue.cjs3.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./List.vue.cjs.js");require("./List.vue.cjs2.js");exports.default=e.default;

package/dist/cjs/components/layout/Main.vue.cjs3.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Main.vue.cjs.js");require("./Main.vue.cjs2.js");exports.default=e.default;

package/dist/cjs/components/layout/Menu.cjs.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("../../store/modules/Menu.cjs.js");function d(o){return typeof o=="function"||Object.prototype.toString.call(o)==="[object Object]"&&!e.isVNode(o)}const i=e.defineComponent({name:"DMenu",setup(){const{list:o}=s.useMenuStore(),r=e.ref(["/labelList","/label"]),u=e.ref(["/label"]),a=({item:l,key:t,keyPath:n})=>{console.log(l,t,n),r.value=n,u.value=[t]},c=(l,t)=>!l||!l.length?null:e.createVNode(e.resolveComponent("a-sub-menu"),null,{title:()=>t.title,default:()=>l.map(n=>e.createVNode(e.resolveComponent("a-menu-item"),{key:n.url},{default:()=>[n.title]}))});return()=>{let l;return e.createVNode(e.resolveComponent("a-menu"),{mode:"inline",openKeys:r.value,"onUpdate:openKeys":t=>r.value=t,selectedKeys:u.value,"onUpdate:selectedKeys":t=>u.value=t,onClick:a},d(l=o.map(t=>e.createVNode(e.resolveComponent("a-sub-menu"),{key:t.url},{title:()=>e.createVNode(e.Fragment,null,[t.title]),icon:()=>e.createVNode(e.Fragment,null,[e.createVNode("span",null,[t.icon?e.h(e.resolveComponent(t.icon)):void 0])]),default:()=>t.children&&t.children.length?t.children.map(n=>e.createVNode(e.Fragment,null,[n.children?c(n.children,t):e.createVNode(e.resolveComponent("a-menu-item"),{key:n.url},{default:()=>[n.title]})])):e.createVNode(e.Fragment,null,[e.createTextVNode("无子标签")])})))?l:{default:()=>[l]})}}});exports.default=i;

package/dist/cjs/components/layout/NavTabs.vue.cjs3.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./NavTabs.vue.cjs.js");require("./NavTabs.vue.cjs2.js");exports.default=e.default;

package/dist/cjs/components/layout/Show.vue.cjs3.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Show.vue.cjs.js");require("./Show.vue.cjs2.js");exports.default=e.default;

package/dist/esm/components/layout/Breadcrumb.vue.esm3.js

@@ -1,5 +0,0 @@
-import o from "./Breadcrumb.vue.esm.js";
-import "./Breadcrumb.vue.esm2.js";
-export {
-  o as default
-};

package/dist/esm/components/layout/List.vue.esm3.js

@@ -1,5 +0,0 @@
-import o from "./List.vue.esm.js";
-import "./List.vue.esm2.js";
-export {
-  o as default
-};

package/dist/esm/components/layout/Main.vue.esm3.js

@@ -1,5 +0,0 @@
-import o from "./Main.vue.esm.js";
-import "./Main.vue.esm2.js";
-export {
-  o as default
-};

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

@@ -1,52 +0,0 @@
-import { defineComponent as p, ref as c, createVNode as l, resolveComponent as o, Fragment as r, h as f, createTextVNode as b, isVNode as m } from "vue";
-import { useMenuStore as y } from "../../store/modules/Menu.esm.js";
-function v(u) {
-  return typeof u == "function" || Object.prototype.toString.call(u) === "[object Object]" && !m(u);
-}
-const h = /* @__PURE__ */ p({
-  name: "DMenu",
-  setup() {
-    const {
-      list: u
-    } = y(), a = c(["/labelList", "/label"]), i = c(["/label"]), s = ({
-      item: n,
-      key: e,
-      keyPath: t
-    }) => {
-      console.log(n, e, t), a.value = t, i.value = [e];
-    }, d = (n, e) => !n || !n.length ? null : l(o("a-sub-menu"), null, {
-      title: () => e.title,
-      default: () => n.map((t) => l(o("a-menu-item"), {
-        key: t.url
-      }, {
-        default: () => [t.title]
-      }))
-    });
-    return () => {
-      let n;
-      return l(o("a-menu"), {
-        mode: "inline",
-        openKeys: a.value,
-        "onUpdate:openKeys": (e) => a.value = e,
-        selectedKeys: i.value,
-        "onUpdate:selectedKeys": (e) => i.value = e,
-        onClick: s
-      }, v(n = u.map((e) => l(o("a-sub-menu"), {
-        key: e.url
-      }, {
-        title: () => l(r, null, [e.title]),
-        icon: () => l(r, null, [l("span", null, [e.icon ? f(o(e.icon)) : void 0])]),
-        default: () => e.children && e.children.length ? e.children.map((t) => l(r, null, [t.children ? d(t.children, e) : l(o("a-menu-item"), {
-          key: t.url
-        }, {
-          default: () => [t.title]
-        })])) : l(r, null, [b("无子标签")])
-      }))) ? n : {
-        default: () => [n]
-      });
-    };
-  }
-});
-export {
-  h as default
-};

package/dist/esm/components/layout/NavTabs.vue.esm3.js

@@ -1,5 +0,0 @@
-import o from "./NavTabs.vue.esm.js";
-import "./NavTabs.vue.esm2.js";
-export {
-  o as default
-};

package/dist/esm/components/layout/Show.vue.esm3.js

@@ -1,5 +0,0 @@
-import o from "./Show.vue.esm.js";
-import "./Show.vue.esm2.js";
-export {
-  o as default
-};