@peng_kai/kit 0.2.11 → 0.2.12

package/admin/styles/classCover.scss

@@ -85,15 +85,26 @@
 }
 
 // 使 Table 组件中的 Pagination 底部粘性
-.ant-table-wrapper.antd-cover__table-sticky-pagination .ant-table-pagination {
-  --pagination-bg-color: var(--antd-colorBgContainer);
-
-  position: sticky;
-  bottom: 16px;
-  z-index: 2;
-  margin-bottom: -9px !important;
-  background-color: var(--pagination-bg-color);
-  box-shadow: 0 0 0 16px var(--pagination-bg-color);
+.ant-table-wrapper.antd-cover__table-sticky-pagination {
+  // .ant-table-sticky-scroll {
+  //   display: block;
+  //   bottom: 64px !important;
+  // }
+
+  // .ant-table-body {
+  //   overflow: hidden !important;
+  // }
+
+  .ant-table-pagination {
+    --pagination-bg-color: var(--antd-colorBgContainer);
+  
+    position: sticky;
+    bottom: 16px;
+    z-index: 2;
+    margin-bottom: -9px !important;
+    background-color: var(--pagination-bg-color);
+    box-shadow: 0 0 0 16px var(--pagination-bg-color);
+  }
 }
 
 // 弹窗的基本款样式

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "",
   "author": "",
   "license": "ISC",

package/vue/components/nav-manager/NavManager.vue

@@ -0,0 +1,158 @@
+<script lang="ts">
+import { computed, reactive, ref, toValue, watch } from 'vue';
+import { type IProvide as INavManagerProvide, useNavManagerRouter } from './useNavManager';
+
+function useHistory(initialValue: string[] = []) {
+  const history = ref([...initialValue]);
+  const current = computed(() => history.value[history.value.length - 1]);
+  const isFirst = computed(() => history.value.length === 1);
+  const lastOperation = ref<'to' | 'back' | 'replace'>('to');
+
+  const to = (name: string) => {
+    lastOperation.value = 'to';
+    history.value.push(name);
+  };
+
+  const back = (index = -1) => {
+    if (index >= 0)
+      return;
+
+    lastOperation.value = 'back';
+
+    const len = history.value.length;
+    const firstEleLastIdx = (len - 1) * -1;
+    const endIdx = index === Number.NEGATIVE_INFINITY || index < firstEleLastIdx
+      ? len + firstEleLastIdx
+      : len + index;
+
+    history.value = history.value.slice(0, endIdx);
+  };
+
+  const replace = (name: string) => {
+    lastOperation.value = 'replace';
+    history.value[history.value.length - 1] = name;
+  };
+
+  return reactive({ history, current, isFirst, lastOperation, to, back, replace });
+}
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  indexName?: string
+  viewClass?: string
+}>(), {
+  indexName: 'index',
+  viewClass: '',
+});
+const emits = defineEmits<{
+  (e: 'close'): void
+}>();
+
+const viewMap = reactive<Record<string, Parameters<INavManagerProvide['addView']>[0]>>({});
+const history = useHistory([props.indexName]);
+const currentView = computed(() => viewMap[history.current]);
+const transitionName = computed(() => `view-${history.lastOperation}`);
+
+watch(currentView, (view, oldView) => {
+  oldView?.hide();
+  view?.show();
+}, { immediate: true });
+
+const navManager: INavManagerProvide = {
+  to: history.to,
+  back: history.back,
+  replace: history.replace,
+  close: () => emits('close'),
+  addView: info => viewMap[info.name] = info,
+  current: computed(() => history.current),
+};
+useNavManagerRouter(navManager);
+</script>
+
+<template>
+  <div class="tt-nav-manager box-border flex flex-col px-3 py-5">
+    <div class="nav-header mb-3 min-h6 flex items-center">
+      <Transition name="back-btn">
+        <div
+          v-if="!history.isFirst"
+          class="nav-back-btn mr-2 size-6 flex cursor-pointer items-center justify-center"
+          @click="navManager.back()"
+        >
+          <i class="i-ri:arrow-left-s-line text-6" />
+        </div>
+      </Transition>
+
+      <div class="nav-title flex-1">
+        {{ toValue(currentView?.title) }}
+      </div>
+
+      <div
+        class="nav-close-btn size-6 flex cursor-pointer items-center justify-center"
+        @click="navManager.close()"
+      >
+        <i class="i-ri:close-line text-6" />
+      </div>
+    </div>
+
+    <div class="relative flex-1 overflow-x-hidden">
+      <Transition :name="transitionName">
+        <div :key="currentView?.name" class="absolute left-0 top-0 h-full w-full overflow-x-hidden overflow-y-auto" :class="$props.viewClass">
+          <slot />
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 返回按钮动画 */
+.back-btn-enter-active,
+.back-btn-leave-active {
+  transition: width 0.2s ease-in-out, opacity 0.1s ease-in-out, margin 0.2s ease-in-out;
+}
+
+.back-btn-enter-from,
+.back-btn-leave-to {
+  width: 0;
+  margin: 0;
+  opacity: 0;
+}
+
+/* 视窗动画 */
+.view-to-enter-active,
+.view-to-leave-active,
+.view-back-enter-active,
+.view-back-leave-active,
+.view-replace-enter-active,
+.view-replace-leave-active {
+  overflow: hidden !important;
+  transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
+}
+
+.view-to-enter-from {
+  opacity: 0;
+  transform: translate(100%);
+}
+
+.view-to-leave-to {
+  opacity: 0;
+  transform: translate(-100%);
+}
+
+.view-back-enter-from {
+  opacity: 0;
+  transform: translate(-100%);
+}
+
+.view-back-leave-to {
+  opacity: 0;
+  transform: translate(100%);
+}
+
+.view-replace-enter-from,
+.view-replace-leave-to {
+  opacity: 0;
+  transform: scale(0.98)
+}
+</style>

package/vue/components/nav-manager/NavView.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue';
+import { useNavManager } from './useNavManager';
+
+const props = defineProps<{
+  name: string
+  title: string
+}>();
+
+const visible = ref(false);
+const navManager = useNavManager();
+
+navManager?.addView(reactive({
+  name: props.name,
+  title: computed(() => props.title),
+  show: () => visible.value = true,
+  hide: () => visible.value = false,
+}));
+</script>
+
+<template>
+  <slot v-if="navManager?.current.value === $props.name" v-bind="{ to: navManager.to }" />
+</template>

package/vue/components/nav-manager/index.ts

@@ -0,0 +1,3 @@
+export { default as NavManager } from './NavManager.vue';
+export { default as NavView } from './NavView.vue';
+export { useNavManagerRouter, useNavManager } from './useNavManager';

package/vue/components/nav-manager/useNavManager.ts

@@ -0,0 +1,26 @@
+import { type Ref, inject, provide } from 'vue';
+
+const NAV_MANAGER_KEY = Symbol('NAV_MANAGER');
+
+export interface IProvide {
+  to: (name: string) => void
+  back: (index?: number) => void
+  replace: (name: string) => void
+  close: () => void
+  addView: (info: {
+    name: string
+    title: string
+    show: () => void
+    hide: () => void
+  }) => void
+  current: Ref<string>
+}
+
+export function useNavManagerRouter(value: IProvide) {
+  provide(NAV_MANAGER_KEY, value);
+  return value;
+}
+
+export function useNavManager() {
+  return inject<IProvide>(NAV_MANAGER_KEY);
+}