@ditari/bsui 1.0.0 → 1.0.2

package/src/components/index.ts

@@ -0,0 +1,31 @@
+import type { App } from "vue";
+import { createPinia } from "pinia";
+import { createPersistedState } from "pinia-plugin-persistedstate";
+
+import * as components from "./components";
+export * from "./components";
+
+const c: any = components;
+export const install = function (app: App, opts: any) {
+  Object.keys(c).forEach((key) => {
+    const component = c[key];
+    if (component.install) {
+      app.use(component);
+    }
+  });
+
+  //注册pinia
+  const pinia = createPinia();
+  //pinia启用持久化
+  pinia.use(
+    createPersistedState({
+      storage: sessionStorage
+    })
+  );
+  app.use(pinia);
+  console.log("options", opts);
+};
+
+export default {
+  install
+};

package/src/components/layout/Breadcrumb.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+/**
+ * 面包屑
+ * @author 余老
+ */
+import { computed } from "vue";
+import { useBreadcrumbStore } from "../../store/modules/Breadcrumb";
+
+const store = useBreadcrumbStore();
+const breadCrumbs = computed(() => store.getBreadcrumb);
+</script>
+<script lang="ts">
+export default {
+  name: "DBreadcrumb"
+};
+</script>
+<template>
+  <div class="ditari-breadcrumb">
+    <div class="breadcrumb">
+      <transition-group name="breadcrumb">
+        <div
+          class="breadcrumb-item"
+          v-for="(item, index) in breadCrumbs"
+          :key="item.path"
+        >
+          <router-link
+            class="breadcrumb-link"
+            :to="{ path: item.path }"
+            v-if="index + 1 !== breadCrumbs.length"
+          >
+            {{ item.title }}
+          </router-link>
+          <span class="breadcrumb-link" v-else>
+            {{ item.title }}
+          </span>
+        </div>
+      </transition-group>
+    </div>
+  </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/Layout.jsx

@@ -0,0 +1,24 @@
+import { defineComponent } from "vue";
+
+/**
+ * 动态布局方案
+ * @type {{style1: (function())}}
+ */
+
+const layoutMap = {
+  style1: () => {
+    return (
+      <a-layout>
+        <d-nav-tabs></d-nav-tabs>
+        <a-layout-content>ok</a-layout-content>
+      </a-layout>
+    );
+  }
+};
+
+export default defineComponent({
+  name: "DLayout",
+  setup() {
+    return () => layoutMap["style1"]();
+  }
+});

package/src/components/layout/List.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import {
+  useSlots,
+  ref,
+  nextTick,
+  onActivated,
+  watch,
+  onDeactivated,
+  onUnmounted,
+  WatchStopHandle,
+  inject
+} from "vue";
+import { useSettingsStore } from "../../store/modules/Settings";
+import { storeToRefs } from "pinia";
+import { useRoute } from "vue-router";
+
+interface Emits {
+  (e: "refresh"): void;
+}
+
+const emits = defineEmits<Emits>();
+
+const slots = useSlots();
+const store = useSettingsStore();
+const route = useRoute();
+const configProvider = inject("configProvider") as any;
+
+const { refresh } = storeToRefs(store);
+
+const toolsRef = ref();
+const tableRef = ref();
+const marginBottom = 16;
+const show = ref(false);
+const height = ref(0);
+
+let stopHandleWatch: WatchStopHandle;
+
+nextTick(() => {
+  setTimeout(() => {
+    height.value = tableRef.value.offsetHeight;
+    show.value = true;
+  }, 1);
+});
+
+watch(
+  () => configProvider?.componentSize,
+  (val) => {
+    show.value = false;
+    setTimeout(() => {
+      height.value = tableRef.value.offsetHeight;
+      show.value = true;
+    }, 100);
+  }
+);
+
+useReload();
+// 处理标签重载
+function useReload() {
+  // !route.meta.keepAlive
+  if (!route.name) {
+    stopHandleWatch = useWatch();
+    // 卸载未缓存的组件
+    onUnmounted(() => {
+      stopHandleWatch();
+    });
+  } else {
+    // 激活缓存页面
+    onActivated(() => {
+      if (refresh.value) {
+        refresh.value = false;
+        emits("refresh");
+      }
+      stopHandleWatch = useWatch();
+    });
+    // 离开缓存页面
+    onDeactivated(() => {
+      stopHandleWatch();
+    });
+  }
+}
+
+function useWatch() {
+  //点击了标签重载图标
+  return watch(
+    () => refresh.value,
+    (val) => {
+      if (val) {
+        // 发送刷新事件到列表页面
+        emits("refresh");
+      }
+    }
+  );
+}
+</script>
+<script lang="ts">
+export default {
+  name: "DListLayout"
+};
+</script>
+<template>
+  <div class="ditari-list-layout">
+    <div ref="contentRef" class="wrapper">
+      <a-card
+        ref="formRef"
+        :bordered="false"
+        :class="{ 'ditari-list-form': slots.form }"
+        :style="{ 'margin-bottom': slots.form ? marginBottom + 'px' : 0 }"
+      >
+        <slot name="form" />
+      </a-card>
+      <a-card class="ditari-list-table" :bordered="false">
+        <div
+          ref="toolsRef"
+          class="xi-tools"
+          :style="{ 'margin-bottom': slots.tools ? marginBottom + 'px' : 0 }"
+        >
+          <a-space>
+            <slot name="tools"></slot>
+          </a-space>
+        </div>
+        <div ref="tableRef" style="flex: 1">
+          <div v-show="show">
+            <slot name="table" :height="height" />
+          </div>
+        </div>
+      </a-card>
+    </div>
+    <div class="xi-content-extra">
+      <slot></slot>
+    </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>

package/src/components/layout/Main.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+/**
+ * 入口文件
+ */
+import { computed } from "vue";
+import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons-vue";
+import { useKeepAliveStore, useSettingsStore } from "../../store";
+
+//标签页组件
+import DNavTabs from "./NavTabs.vue";
+//面包屑组件
+import DBreadcrumb from "./Breadcrumb.vue";
+// 菜单组件
+import Menu from "./Menu";
+
+// 缓存store
+const store = useKeepAliveStore();
+// 缓存的names
+const keepAliveNames = computed(() => store.get);
+// 设置store
+const settingsStore = useSettingsStore();
+const { switchCollapsed } = settingsStore;
+const collapsedStatus = computed(() => settingsStore.getCollapsed);
+</script>
+<script lang="ts">
+export default {
+  name: "DMainLayout"
+};
+</script>
+<template>
+  <a-layout class="ditari-layout">
+    <a-layout-sider
+      v-model:collapsed="collapsedStatus"
+      :trigger="null"
+      collapsible
+      class="ditari-layout-sider"
+    >
+      <div class="ditari-logo">
+        <slot name="logo"></slot>
+      </div>
+      <div class="ditari-menu">
+        <Menu />
+      </div>
+    </a-layout-sider>
+    <a-layout>
+      <div
+        class="ditari-top-layout"
+        :style="{ left: collapsedStatus ? '80px' : '200px' }"
+      >
+        <d-nav-tabs />
+        <div class="ditari-layout-header">
+          <div class="ditari-layout-header-left">
+            <div class="ditari-side-collapsed" @click="switchCollapsed">
+              <menu-unfold-outlined
+                v-if="collapsedStatus"
+                class="trigger"
+                style="font-size: 16px; font-weight: bold; cursor: pointer"
+              />
+              <menu-fold-outlined
+                v-else
+                style="font-size: 16px; font-weight: bold; cursor: pointer"
+              />
+            </div>
+            <d-breadcrumb />
+          </div>
+          <div class="ditari-user-menu">
+            <slot name="operation"></slot>
+          </div>
+        </div>
+      </div>
+      <a-layout-content
+        class="ditari-layout-content"
+        :style="{ marginLeft: collapsedStatus ? '80px' : '200px' }"
+      >
+        <router-view v-slot="{ Component }">
+          <transition name="main" mode="out-in" appear>
+            <keep-alive ref="keepAliveRef" :include="keepAliveNames">
+              <component :is="Component" :key="$route.path" />
+            </keep-alive>
+          </transition>
+        </router-view>
+      </a-layout-content>
+    </a-layout>
+  </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>

package/src/components/layout/Menu.jsx

@@ -0,0 +1,96 @@
+import { defineComponent, h, ref, resolveComponent } from "vue";
+import { useMenuStore } from "../../store/modules/Menu";
+
+export default defineComponent({
+  name: "DMenu",
+  setup() {
+    const { list } = useMenuStore();
+    // 当前展开的菜单
+    const openKeys = ref(["/labelList", "/label"]);
+    // 当前选中的菜单
+    const selectedKeys = ref(["/label"]);
+
+    /**
+     * 监听菜单点击事件
+     * @param item
+     * @param key
+     * @param keyPath
+     */
+    const onClick = ({ item, key, keyPath }) => {
+      console.log(item, key, keyPath);
+      openKeys.value = keyPath;
+      selectedKeys.value = [key];
+    };
+    /**
+     * 监听菜单展开事件
+     * @param keys
+     */
+    const openChange = (keys) => {
+      //TODO 暂时先不处理
+      console.log(keys);
+    };
+
+    // 递归渲染子菜单
+    const renderSubMenu = (menuList, parent) => {
+      if (!menuList || !menuList.length) {
+        return null;
+      }
+
+      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>
+      );
+    };
+
+    return () => (
+      <a-menu
+        mode="inline"
+        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>
+        ))}
+      </a-menu>
+    );
+  }
+});