@ditari/bsui 1.0.0 → 1.0.2

package/src/components/layout/NavTabs.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+/**
+ * 标签组件
+ */
+import { computed, Ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { CloseOutlined } from "@ant-design/icons-vue";
+import { useNavTabsStore, useKeepAliveStore } from "../../store";
+import { INavTab } from "../../store/modules/NavTab";
+import { storeToRefs } from "pinia";
+
+const route = useRoute();
+const router = useRouter();
+
+const navStore = useNavTabsStore();
+const keepAliveStore = useKeepAliveStore();
+
+//标签列表
+const navTabs: Ref<INavTab[]> = computed(() => navStore.getList);
+//激活的标签 转化成Ref对象 不然v-model无法操作更新
+const { activeKey } = storeToRefs(navStore);
+
+//首次进入页面或者刷新的时候执行
+setNavTabs();
+
+watch(
+  () => route.path,
+  () => {
+    //TODO 需要优化 确保只有未打开过的标签 进入保存
+    setNavTabs();
+  }
+);
+
+//设置标签
+function setNavTabs() {
+  // 保存标签
+  navStore.save(route);
+  // 设置激活的标签
+  navStore.setActiveKey(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
+    });
+  }
+};
+
+/**
+ * 关闭标签
+ * @param $event
+ * @param targetKey
+ */
+const onClose = ($event: any, key: string) => {
+  const rs = navTabs.value.filter((item) => item.path === key)[0];
+  //阻止冒泡
+  $event.stopPropagation();
+  // 删除标签
+  navStore.deleteTabs(key);
+  // 重新push已打开的路由
+  router.push(navTabs.value[navTabs.value.length - 1].fullPath);
+
+  //根据name 删除缓存的组件
+  if (rs.name) {
+    keepAliveStore.deleteKeepAlive(rs.name);
+  }
+};
+</script>
+<script lang="ts">
+export default {
+  name: "DNavTabs"
+};
+</script>
+<template>
+  <div class="ditari-nav">
+    <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-item" :class="{ active: activeKey === item.path }">
+            {{ item.meta.title }}
+          </div>
+          <CloseOutlined @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>

package/src/components/layout/Show.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+/**
+ * 详情/新增/编辑组件
+ */
+import { useSlots, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { LeftOutlined } from "@ant-design/icons-vue";
+import { useScrollLock, useWindowScroll } from "@vueuse/core";
+import { useNavTabsStore } from "../../store/modules/NavTab";
+import { useSettingsStore } from "../../store/modules/Settings";
+
+import { storeToRefs } from "pinia";
+
+interface Props {
+  // 点击返回的时候是否关闭标签
+  close?: boolean;
+  // 请求数据的时候开启加载效果
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  close: false,
+  loading: false
+});
+
+const router = useRouter();
+const route = useRoute();
+const slots = useSlots();
+
+const navTabStore = useNavTabsStore();
+const settingsStore = useSettingsStore();
+
+const { refresh } = storeToRefs(settingsStore);
+
+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.path);
+  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({
+  refresh: onRefresh
+});
+</script>
+<script lang="ts">
+export default {
+  name: "DShowLayout"
+};
+</script>
+<template>
+  <div class="ditari-show-layout">
+    <a-spin
+      tip="正在处理..."
+      :spinning="loading"
+      :delay="delayTime"
+      size="large"
+    >
+      <a-page-header
+        class="ditari-page-header"
+        :class="{ active: y > 0 }"
+        :ghost="false"
+        @back="onBack"
+      >
+        <template #backIcon>
+          <LeftOutlined />
+        </template>
+        <template #title>{{ $route.meta.title }} </template>
+        <template #subTitle>
+          <slot name="subTitle"></slot>
+        </template>
+        <template #extra>
+          <slot name="extra"></slot>
+        </template>
+      </a-page-header>
+      <div class="ditari-show-content" :style="contentStyle">
+        <slot></slot>
+      </div>
+      <div v-if="$slots.footer" class="ditari-show-footer">
+        <slot name="footer"></slot>
+      </div>
+    </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>

package/src/components/layout/index.ts

@@ -0,0 +1,19 @@
+import { withInstall } from "../../utils/index";
+import List from "./List.vue";
+import Main from "./Main.vue";
+
+import NavTabs from "./NavTabs.vue";
+
+import Show from "./Show.vue";
+
+export const DList = withInstall(List);
+export const DMain = withInstall(Main);
+export const DNavTabs = withInstall(NavTabs);
+export const DShow = withInstall(Show);
+
+// export default {
+//   DList,
+//   DMain,
+//   DNavTabs,
+//   DShow
+// };

package/src/components/menu/Menu.jsx

@@ -0,0 +1,94 @@
+import { defineComponent, h, ref, resolveComponent } from "vue";
+import { useMenuStore } from "../../store";
+
+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>
+    );
+  }
+});

package/src/components/menu/style/index.scss

@@ -0,0 +1,18 @@
+@import "../../theme/variable.scss";
+
+.ditari-menu {
+  // 菜单高度 $logo-height 为logo的高度
+  height: calc(100vh - $logo-height);
+  overflow: scroll;
+  &::-webkit-scrollbar {
+    width: 0 !important;
+    display: none;
+  }
+}
+
+.ditari-layout {
+  background-color: red;
+  .ditari-layout-sider {
+    background-color: red;
+  }
+}

package/src/components/select/Select.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { watch, ref } from "vue";
+import { useDic } from "@dth-doned/hooks";
+
+interface Props {
+  value: any;
+  name: string; //字典名字
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: null,
+  name: "",
+  disabled: false,
+  placeholder: "请填写默认占位符啊！老铁"
+});
+
+interface Emits {
+  (e: "update:value", value: any): void;
+}
+const emits = defineEmits<Emits>();
+
+const { modelValue, data, onSearch, onSelect } = useSelect();
+function useSelect() {
+  const { getDic } = useDic();
+  const dicData = getDic(props.name);
+
+  const data = ref(dicData);
+  const modelValue = ref(props.value);
+
+  //监听用户搜索事件
+  const onSearch = (value: string) => {
+    data.value = dicData.filter((item: any) => {
+      return (
+        item.value.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
+        item.label.toLowerCase().includes(value.toLowerCase())
+      );
+    });
+  };
+
+  //监听下拉选择事件
+  const onSelect = (value: any) => {
+    // 发射选择的数据
+    emits("update:value", value);
+  };
+
+  //监听数据变化
+  watch(
+    () => props.value,
+    (val) => {
+      modelValue.value = val;
+      if (!val) {
+        data.value = dicData;
+      }
+    }
+  );
+  return {
+    data,
+    modelValue,
+    onSearch,
+    onSelect
+  };
+}
+</script>
+<script lang="ts">
+export default {
+  name: "DSelect"
+};
+</script>
+<template>
+  <a-select
+    v-model:value="modelValue"
+    allow-clear
+    show-search
+    :filter-option="false"
+    :options="data"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    @select="onSelect"
+    @search="onSearch"
+  >
+  </a-select>
+</template>
+<style scoped></style>

package/src/components/table/Field.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { h } from "vue";
+import { Badge } from "ant-design-vue";
+import dayjs from "dayjs";
+
+interface Props {
+  text: string;
+  config: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  text: "",
+  config: {}
+});
+
+// const { getText } = useDic();
+const getText = (name: string, text: string): string => {
+  return name + text;
+};
+
+const render = () => {
+  const {
+    text,
+    config: { type }
+  } = props;
+
+  if (type === "dic") {
+    const { name, style } = props.config;
+    return h("div", [
+      h(Badge, {
+        color: style[text] || "#f50"
+      }),
+      h(
+        "span",
+        { style: { color: style[text] || "#f50" } },
+        getText(name, text)
+      )
+    ]);
+  } else if (type === "date") {
+    const { formatter } = props.config;
+    const rs =
+      text !== "" ? "" : dayjs(text).format(formatter || "YYYY-MM-DD HH:mm:ss");
+    return h("span", rs);
+  }
+};
+</script>
+<template>
+  <render />
+</template>