@ditari/bsui 1.1.48 → 5.0.2

package/src/layout/FuckMain.vue

@@ -1,90 +0,0 @@
-<script setup lang="ts">
-/**
- * FUCK MAIN 入口文件
- */
-import { computed, provide } from "vue";
-import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons-vue";
-import { useKeepAliveStore, useSettingsStore } from "@ditari/store";
-
-//标签页组件
-import DNavTabs from "./NavTabs.vue";
-// 菜单组件
-import Menu from "../menu/Menu";
-
-const props = withDefaults(
-  defineProps<{
-    showConfig?: any;
-    breadcrumbStatus?: boolean;
-  }>(),
-  {
-    showConfig: { backBtn: "LeftOutlined" } as any
-  }
-);
-
-// 注入show组件的配置文件
-// eslint-disable-next-line vue/no-setup-props-destructure
-provide("showConfig", props.showConfig);
-
-// 缓存store
-const store = useKeepAliveStore();
-// 缓存的names
-const keepAliveNames = computed(() => store.get);
-// 设置store
-const settingsStore = useSettingsStore();
-const { switchCollapsed } = settingsStore;
-const collapsedStatus = computed(() => settingsStore.getCollapsed);
-</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-fuck-top-layout"
-        :style="{ left: collapsedStatus ? '80px' : '200px' }"
-      >
-        <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-nav-tabs />
-        <div class="ditari-user-menu">
-          <slot name="operation"></slot>
-        </div>
-      </div>
-      <a-layout-content
-        style="margin-top: 42px"
-        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>
-        <slot name="micro"></slot>
-      </a-layout-content>
-    </a-layout>
-  </a-layout>
-  <a-back-top class="ditari-ant-back-top" :visibility-height="50"></a-back-top>
-</template>

package/src/layout/List.vue

@@ -1,145 +0,0 @@
-<script setup lang="ts">
-import {
-  useSlots,
-  ref,
-  onActivated,
-  watch,
-  onDeactivated,
-  onUnmounted,
-  WatchStopHandle,
-  inject,
-  nextTick
-} from "vue";
-import { useElementSize, useResizeObserver } from "@vueuse/core";
-import { useSettingsStore } from "@ditari/store";
-import { storeToRefs } from "pinia";
-import { useRoute } from "vue-router";
-
-const emits = defineEmits<{ (e: "refresh"): void }>();
-
-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;
-
-watch(
-  () => configProvider?.componentSize,
-  () => {
-    calcHeight();
-  }
-);
-
-useReload();
-// 处理标签重载
-function useReload() {
-  // !route.meta.keepAlive
-  if (!route.name) {
-    stopHandleWatch = useWatch();
-    // 卸载未缓存的组件
-    onUnmounted(() => {
-      stopHandleWatch && stopHandleWatch();
-    });
-  } else {
-    // 激活缓存页面
-    onActivated(() => {
-      if (refresh.value) {
-        refresh.value = false;
-        emits("refresh");
-      }
-      stopHandleWatch = useWatch();
-    });
-    // 离开缓存页面
-    onDeactivated(() => {
-      stopHandleWatch && stopHandleWatch();
-    });
-  }
-}
-
-function useWatch() {
-  //点击了标签重载图标
-  return watch(
-    () => refresh.value,
-    (val) => {
-      if (val) {
-        // 发送刷新事件到列表页面
-        emits("refresh");
-      }
-    }
-  );
-}
-
-// 监听表单高度变化
-// 然后再获取表格高度
-// 在表格高度动态变化的时候会被监听到
-const formRef = ref(null);
-const { height: formHeight } = useElementSize(formRef);
-watch(
-  () => formHeight.value,
-  () => {
-    nextTick(() => {
-      calcHeight();
-    });
-  }
-);
-
-const { stop } = useResizeObserver(document.body, () => {
-  calcHeight();
-});
-
-onUnmounted(() => {
-  stop();
-});
-
-// 动态计算高度
-function calcHeight() {
-  show.value = false;
-  nextTick(() => {
-    height.value = tableRef?.value?.offsetHeight;
-    show.value = true;
-  });
-}
-</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" style="height: 100%">
-            <slot name="table" :height="height" />
-          </div>
-        </div>
-      </a-card>
-    </div>
-    <div class="ditari-content-extra">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-<style></style>

package/src/layout/Main.vue

@@ -1,97 +0,0 @@
-<script setup lang="ts">
-/**
- * 入口文件
- */
-import { computed, provide } from "vue";
-import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons-vue";
-import { useKeepAliveStore, useSettingsStore } from "@ditari/store";
-
-//标签页组件
-import DNavTabs from "./NavTabs.vue";
-//面包屑组件
-import DBreadcrumb from "./Breadcrumb.vue";
-// 菜单组件
-import Menu from "../menu/Menu";
-
-const props = withDefaults(
-  defineProps<{
-    showConfig?: any;
-    breadcrumbStatus?: boolean;
-  }>(),
-  {
-    showConfig: { backBtn: "LeftOutlined" } as any
-  }
-);
-// 注入show组件的配置文件
-// eslint-disable-next-line vue/no-setup-props-destructure
-provide("showConfig", props.showConfig);
-// 缓存store
-const store = useKeepAliveStore();
-// 缓存的names
-const keepAliveNames = computed(() => store.get);
-// 设置store
-const settingsStore = useSettingsStore();
-const { switchCollapsed } = settingsStore;
-const collapsedStatus = computed(() => settingsStore.getCollapsed);
-</script>
-<template>
-  <a-layout class="ditari-layout">
-    <a-layout-sider
-      v-model:collapsed="collapsedStatus"
-      :trigger="null"
-      collapsible
-      class="ditari-layout-sider"
-    >
-      <div>
-        <div class="ditari-logo">
-          <slot name="logo"></slot>
-        </div>
-        <div class="ditari-menu">
-          <Menu />
-        </div>
-      </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>
-        <slot name="micro"></slot>
-      </a-layout-content>
-    </a-layout>
-  </a-layout>
-  <a-back-top class="ditari-ant-back-top" :visibility-height="50"></a-back-top>
-</template>
-<style lang="scss"></style>

package/src/layout/NavTabs.vue

@@ -1,129 +0,0 @@
-<script setup lang="ts">
-/**
- * 标签组件
- */
-import { computed, Ref, watch, watchEffect, ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { CloseOutlined } from "@ant-design/icons-vue";
-import { storeToRefs } from "pinia";
-
-import {
-  useNavTabsStore,
-  useKeepAliveStore,
-  useMenuStore
-} from "@ditari/store";
-
-import { prefixName } from "../theme";
-
-const route = useRoute();
-const router = useRouter();
-
-const navStore = useNavTabsStore();
-const keepAliveStore = useKeepAliveStore();
-const menuStore = useMenuStore();
-
-//class名称
-const baseClassName = `${prefixName}-nav`;
-
-//标签列表
-const navTabs: Ref<any[]> = computed(() => navStore.getList);
-// 被选中的菜单
-const { selectedMenuKeys } = storeToRefs(menuStore);
-//当前被激活的标签 通过选中的菜单得到
-const activeKey = ref("");
-watchEffect(() => {
-  activeKey.value =
-    selectedMenuKeys.value.length > 0 ? selectedMenuKeys.value[0] : "";
-});
-//首次进入页面或者刷新的时候执行
-setNavTabs();
-// 监听路由变化
-watch(
-  () => route.path,
-  () => {
-    //TODO 需要优化 确保只有未打开过的标签 进入保存
-    setNavTabs();
-  }
-);
-
-//设置标签
-function setNavTabs() {
-  // 保存标签
-  navStore.save(route);
-  // 设置激活的标签
-  //navStore.setActiveKey(route.path);
-  selectedMenuKeys.value = [route.path];
-  keepAliveStore.save(route);
-}
-
-/**
- * 切换标签
- * @param nav
- */
-const onClick = (key: string) => {
-  if (key !== route.path) {
-    // 匹配打开的标签路由数据
-    const rs = navTabs.value.filter((item: any) => item.path === key)[0];
-    // 打开路由
-    router.push({
-      path: rs.path,
-      query: rs.query,
-      params: rs.params,
-      fullPath: rs.fullPath
-    } as any);
-  }
-};
-
-/**
- * 关闭标签
- * @param $event
- * @param targetKey
- */
-const onClose = ($event: any, key: string) => {
-  //const rs = navTabs.value.find((item) => item.fullPath === key) as any;
-  //阻止冒泡
-  $event.stopPropagation();
-  // 删除标签
-  navStore.deleteTabs(key);
-  // 重新push已打开的路由
-  router.push(navTabs.value[navTabs.value.length - 1].fullPath);
-
-  //根据name 删除缓存的组件
-  // if (rs.name) {
-  //   keepAliveStore.deleteKeepAlive(rs.name);
-  // }
-};
-
-/**
- * 是否显示标签关闭按钮函数
- * @param item
- * 根据item和当前 navTabs 长度来判断是否要隐藏关闭标签按钮
- */
-const closeStatus = (item: any) => {
-  // 如果meta有设置keepOpen或者当前打开的标签只有一个的话不显示关闭按钮
-  if (item.meta?.keepOpen) {
-    return false;
-  } else {
-    // 如果只有一个标签，则隐藏关闭按钮
-    return navTabs.value.length === 1 ? false : true;
-  }
-};
-</script>
-<template>
-  <div :class="baseClassName">
-    <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>
-          <div v-if="closeStatus(item)" class="tab-close">
-            <CloseOutlined @click="onClose($event, item.fullPath)" />
-          </div>
-        </template>
-      </a-tab-pane>
-    </a-tabs>
-  </div>
-</template>
-<style lang="scss"></style>

package/src/layout/Show.vue

@@ -1,136 +0,0 @@
-<script setup lang="ts">
-/**
- * 详情/新增/编辑组件
- */
-import { computed, inject, useSlots, watch, h, resolveComponent } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useScrollLock, useWindowScroll } from "@vueuse/core";
-import { LeftOutlined } from "@ant-design/icons-vue";
-import { useNavTabsStore, useSettingsStore } from "@ditari/store";
-
-import { storeToRefs } from "pinia";
-
-const props = withDefaults(
-  defineProps<{
-    // 点击返回的时候是否关闭标签
-    close?: boolean;
-    // 请求数据的时候开启加载效果
-    loading?: boolean;
-    // 是否显示返回按钮
-    showBack?: boolean;
-  }>(),
-  {
-    close: false,
-    loading: false,
-    showBack: true
-  }
-);
-
-const router = useRouter();
-const route = useRoute();
-const slots = useSlots();
-
-const navTabStore = useNavTabsStore();
-const settingsStore = useSettingsStore();
-
-const showConfig = inject("showConfig") as any;
-const collapsedStatus = computed(() => settingsStore.getCollapsed);
-const btnRender = () => {
-  if (!showConfig) {
-    return h(LeftOutlined);
-  } else {
-    return h(resolveComponent(showConfig.backBtn));
-  }
-};
-
-const { refresh } = storeToRefs(settingsStore);
-
-const showLoading = computed(() => props.loading);
-
-const contentStyle = {
-  padding: `10px 10px ${slots.footer ? "70px" : "10px"} 10px`
-};
-
-/**
- * 点击返回
- */
-const onBack = () => {
-  if (props.close) {
-    // 返回关闭标签
-    navTabStore.deleteTabs(route.path);
-    router.go(-1);
-  } else {
-    // 不关闭标签
-    router.go(-1);
-  }
-};
-
-/**
- * 对外暴露方法 调用后关闭标签 并且出发List组件刷新动作
- */
-const onRefresh = () => {
-  refresh.value = true;
-  navTabStore.deleteTabs(route.fullPath);
-  router.go(-1);
-};
-
-/**
- * 监听屏幕滚动，滚动大于0的时候给a-page-header组件添加阴影
- */
-const { y } = useWindowScroll();
-// 锁定屏幕
-const isLocked = useScrollLock(document.body);
-
-watch(
-  () => props.loading,
-  (val) => {
-    isLocked.value = val;
-  }
-);
-
-const delayTime = 200;
-defineExpose({
-  closePage: onRefresh
-});
-</script>
-<template>
-
-  <div class="ditari-show-layout">
-    <a-page-header
-      v-if="showBack"
-      class="ditari-page-header"
-      :class="{ active: y > 0 }"
-      :ghost="false"
-      @back="onBack"
-    >
-      <template #backIcon>
-        <btn-render />
-      </template>
-      <template #title>{{ $route.meta.title }} </template>
-      <template #subTitle>
-        <slot name="subTitle"></slot>
-      </template>
-      <template #extra>
-        <slot name="extra"></slot>
-      </template>
-    </a-page-header>
-    <a-spin
-      tip="正在处理..."
-      :spinning="showLoading"
-      :delay="delayTime"
-      size="large"
-    >
-      <div class="ditari-show-content" :style="contentStyle">
-        <slot></slot>
-      </div>
-      <div
-        v-if="$slots.footer"
-        class="ditari-show-footer"
-        :style="{ left: collapsedStatus ? '80px' : '200px' }"
-      >
-        <slot name="footer"></slot>
-      </div>
-    </a-spin>
-  </div>
-</template>
-<style lang="scss"></style>

package/src/layout/index.ts

@@ -1,24 +0,0 @@
-import type { App } from "vue";
-import List from "./List.vue";
-import Main from "./Main.vue";
-import FuckMain from "./FuckMain.vue";
-import Show from "./Show.vue";
-
-List.install = function (app: App) {
-  app.component("DListLayout", List);
-  return app;
-};
-Main.install = function (app: App) {
-  app.component("DMainLayout", Main);
-  return app;
-};
-FuckMain.install = function (app: App) {
-  app.component("DFuckMain", FuckMain);
-  return app;
-};
-Show.install = function (app: App) {
-  app.component("DShowLayout", Show);
-  return app;
-};
-
-export { List, Main, FuckMain, Show };

package/src/layout/style/breadcrumb.scss

@@ -1,61 +0,0 @@
-@import "../../theme/variable.scss";
-.#{$prefix-name}-breadcrumb {
-  .ant-breadcrumb-separator {
-    display: none;
-  }
-  .breadcrumb {
-    display: flex;
-    .breadcrumb-item {
-      color: $bread-txt-color;
-      &: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(:first-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%
-    );
-  }
-  a{
-    &.breadcrumb-link{
-      color:  $bread-link-txt-color;
-    }
-  }
-}
-
-.breadcrumb-enter-active {
-  transition: all 0.25s;
-}
-
-.breadcrumb-enter-from,
-.breadcrumb-leave-active {
-  opacity: 0;
-  transform: translateX(30px) skewX(-50deg);
-}

package/src/layout/style/fuckmain.scss

@@ -1,21 +0,0 @@
-@import "../../theme/variable.scss";
-.ditari-fuck-top-layout {
-  position: fixed;
-  left: 200px;
-  right: 0;
-  z-index: 210;
-  display: flex;
-  background: $nav-tab-bg-color;
-  .ditari-bsui-nav {
-    flex: 1;
-    min-width: 0;
-  }
-  .ditari-side-collapsed{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 42px;
-    cursor: pointer;
-    color: $fuck-main-collapsed-color
-  }
-}