@peng_kai/kit 0.3.0-beta.3 → 0.3.0-beta.31

package/admin/layout/large/Menu.vue

@@ -2,8 +2,7 @@
 import { computed, ref, watch } from 'vue';
 import { Menu as AMenu } from 'ant-design-vue';
 import type { ItemType } from 'ant-design-vue';
-import { injectTTAdmin } from '../../adminPlugin';
-import type { TMenu } from '../../stores/createUseMenuStore';
+import type { TMenu } from '../../components/provider/admin-router';
 
 function formatMenu(menu: TMenu): ItemType {
   return {
@@ -21,24 +20,19 @@ function formatMenu(menu: TMenu): ItemType {
 </script>
 
 <script setup lang="ts">
-const { router, useMenuStore } = injectTTAdmin()!.deps;
-const menuStore = useMenuStore();
-const items = computed(() => menuStore.menus.map(formatMenu));
+const props = defineProps<{
+  path: TMenu[]
+  menus: TMenu[]
+}>();
+
+const items = computed(() => props.menus.map(formatMenu));
 const openKeys = ref<string[]>([]);
 const selectedKeys = ref<string[]>([]);
 
-watch(
-  () => router?.currentRoute.value,
-  (route) => {
-    if (!route)
-      return;
-
-    const menuPath = menuStore.getMenuPath(route.name as string);
-    openKeys.value = menuPath.map(menu => menu.key);
-    selectedKeys.value = [openKeys.value.pop()!];
-  },
-  { immediate: true },
-);
+watch(() => props.path, (menuPath) => {
+  openKeys.value = menuPath.map(menu => menu.key);
+  selectedKeys.value = [openKeys.value.pop()!];
+}, { immediate: true });
 </script>
 
 <template>
@@ -64,5 +58,18 @@ watch(
   .ant-menu {
     background-color: transparent;
   }
+
+  :deep(.ant-menu-submenu-arrow){
+    top: 52%;
+    inset-inline-end: 8px;
+  }
+
+  :deep(.ant-menu-item-only-child) {
+    padding-left: 43px !important;
+  }
+
+  :deep(.ant-menu-sub.ant-menu-inline) {
+    background-color: transparent;
+  }
 }
 </style>

package/admin/layout/large/Notice.vue

@@ -0,0 +1,152 @@
+<script lang="ts">
+import { useEventListener, useIntervalFn } from '@vueuse/core';
+import { Empty, Dropdown, Badge, Menu, MenuItem } from 'ant-design-vue';
+import { type UseQueryReturnType } from '@tanstack/vue-query'
+import { watch, ref, computed } from 'vue'
+import dayjs from '../../../libs/dayjs';
+import { useRouter } from 'vue-router';
+import audioURL from './y682.mp3?url';
+
+const noticeAudio = new Audio(audioURL);
+noticeAudio.muted = true;
+noticeAudio.src = audioURL;
+document.body.append(noticeAudio);
+
+const faviconEle = document.querySelector('link[rel="icon"]');
+const logoFaviconHref = document.querySelector('link[rel="icon"]')?.getAttribute('href')!;
+const numCanvas = document.createElement('canvas') as (HTMLCanvasElement & { num: number, dataURL: string });
+numCanvas.width = 32;
+numCanvas.height = 32;
+
+interface TNotice {
+  title: string;
+  type: number;
+  url: string;
+  time: number;
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  noticesQry: UseQueryReturnType<{num: number; list: TNotice[]}, Error>
+  onOpen?: (item: TNotice) => void;
+}>()
+
+const router = useRouter();
+const visible = ref(false);
+const noticeNum = computed(() => props.noticesQry.data.value?.num ?? 0);
+const noticeList = computed(() => props.noticesQry.data.value?.list ?? []);
+
+function operate(notice: TNotice) {
+  if (props.onOpen) {
+    props.onOpen(notice);
+    return;
+  }
+
+  if (router.currentRoute.value.path !== notice.url) {
+    router.push(notice.url);
+  }
+}
+
+// watch(noticeNum, (num = 0, oldNum = 0) => {
+//   num > oldNum && noticeAudio.play();
+// }, { immediate: true });
+useEventListener(document, 'click', () => {
+  noticeAudio.muted = false;
+});
+
+useIntervalFn(() => {
+  const num = noticeNum.value;
+
+  if (num) {
+    noticeAudio.paused && noticeAudio.play();
+  }
+
+  if (!num || !faviconEle || document.visibilityState === 'visible') {
+    faviconEle?.setAttribute('href', logoFaviconHref);
+    return;
+  }
+
+  const isNumIcon = faviconEle.getAttribute('href')?.startsWith('data:image/png');
+
+  if (isNumIcon) {
+    faviconEle.setAttribute('href', logoFaviconHref);
+  }
+  else {
+    if (numCanvas.num !== num) {
+      numCanvas.num = num;
+      const ctx = numCanvas.getContext('2d')!;
+      ctx.fillStyle = '#f00';
+      ctx.beginPath();
+      ctx.arc(16, 16, 16, 0, Math.PI * 2, true);
+      ctx.fill();
+      ctx.fillStyle = '#fff';
+      ctx.font = 'bold 22px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(num.toString(), 16, 16);
+      numCanvas.dataURL = numCanvas.toDataURL();
+    }
+
+    faviconEle.setAttribute('href', numCanvas.dataURL);
+  }
+}, 500);
+</script>
+
+<template>
+  <Badge :count="noticeNum" size="small">
+    <Dropdown v-model:open="visible" placement="bottomRight" trigger="click" arrow>
+      <div class="h-7 flex cursor-pointer items-center justify-center rounded-1 px-1">
+        <i class="i-ri:notification-4-line block text-5" :class="{ shake: !!noticeNum }" />
+      </div>
+      <template #overlay>
+        <Menu v-if="noticeNum" @click="visible = false" class="max-h-100 overflow-y-auto">
+          <MenuItem v-for="(item, i) of noticeList" :key="i" @click="operate(item)">
+          <div class="min-w-50">
+            <div>{{ item.title }}</div>
+            <div class="mt-1 text-xs text-$antd-colorTextSecondary">
+              {{ dayjs(item.time).format('MM-DD HH:mm:ss') }}
+            </div>
+          </div>
+          </MenuItem>
+        </Menu>
+        <div v-else class="h-40 min-w-50 flex items-center justify-center rounded-2 bg-$antd-colorBgElevated shadow"
+          @click="visible = false">
+          <Empty description="暂无通知" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+        </div>
+      </template>
+    </Dropdown>
+  </Badge>
+</template>
+
+<style lang="scss" scoped>
+@keyframes shake {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  25% {
+    transform: rotate(10deg);
+  }
+
+  50% {
+    transform: rotate(-10deg);
+  }
+
+  75% {
+    transform: rotate(10deg);
+  }
+
+  100% {
+    transform: rotate(-10deg);
+  }
+}
+
+.shake {
+  animation: shake 0.5s infinite;
+}
+
+.shadow {
+  box-shadow: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%);
+}
+</style>

package/admin/layout/large/Tabs.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { autoResetRef, useEventListener, useMutationObserver, useResizeObserver } from '@vueuse/core';
+import type { TTab } from '../../components/provider/admin-router';
+
+const props = defineProps<{
+  current: TTab
+  tabs: TTab[]
+}>();
+const emits = defineEmits<{
+  close: [TTab]
+  open: [TTab]
+  refresh: [TTab]
+}>();
+
+const $tabList = ref<HTMLElement>();
+const refreshAnim = autoResetRef(false, 300);
+const isLeftmost = ref(false);
+const isRightmost = ref(false);
+
+useEventListener($tabList, 'wheel', (e) => {
+  if ($tabList.value) {
+    const deltaY = e.deltaY < 0 ? -100 : 100;
+    $tabList.value.scrollLeft += deltaY;
+  }
+});
+
+function isScrollEnd() {
+  if ($tabList.value) {
+    const { scrollLeft, scrollWidth, clientWidth } = $tabList.value;
+    isRightmost.value = scrollLeft === 0;
+    isLeftmost.value = Math.ceil(Math.abs(scrollLeft) + clientWidth) >= scrollWidth;
+  }
+}
+
+function open(tab: TTab) {
+  if (props.current.path !== tab.path) {
+    emits('open', tab);
+  }
+}
+
+function refresh(tab: TTab) {
+  if (!refreshAnim.value) {
+    refreshAnim.value = true;
+    emits('refresh', tab);
+  }
+}
+
+useEventListener($tabList, 'scroll', isScrollEnd);
+useResizeObserver($tabList, isScrollEnd);
+useMutationObserver($tabList, isScrollEnd, { childList: true });
+</script>
+
+<template>
+  <div class="flex items-center">
+    <div ref="$tabList" class="tab-list relative ml-auto" :class="{ 'is-leftmost': isLeftmost, 'is-rightmost': isRightmost }">
+      <div
+        v-for="tab of props.tabs" :key="tab.path"
+        class="tab" :class="{ opened: tab.path === props.current?.path }"
+        @click="open(tab)"
+      >
+        <span class="title">{{ tab.title }}</span>
+        <span v-if="tab.type !== 2 && props.tabs.length > 1" class="close-btn" @click.stop="emits('close', tab)">
+          <i class="i-material-symbols:close-rounded" />
+        </span>
+      </div>
+    </div>
+    <div v-memo="[refreshAnim]" class="operation-btn ml-2" @click="refresh(props.current)">
+      <i class="i-material-symbols:refresh-rounded" :class="{ 'refresh-spin': refreshAnim }" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tab-list {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  overflow-x: auto;
+  scrollbar-width: none;
+  flex: 1;
+  mask-image: linear-gradient(to left, #0000 0%, #000 5%, #000 95%, #0000 100%);
+  direction: rtl;
+
+  &.is-leftmost:not(.is-rightmost) {
+    mask-image: linear-gradient(to right, #000 0%, #000 5%, #000 95%, #0000 100%);
+  }
+
+  &.is-rightmost:not(.is-leftmost) {
+    mask-image: linear-gradient(to left, #000 0%, #000 5%, #000 95%, #0000 100%);
+  }
+
+  &.is-leftmost.is-rightmost {
+    mask-image: none;
+  }
+}
+
+.tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  height: 28px;
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s;
+  white-space: nowrap;
+  line-height: 1em;
+  color: var(--antd-colorTextTertiary);
+
+  &:not(.opened):hover {
+    color: var(--antd-colorText);
+  }
+
+  &.opened {
+    color: var(--antd-colorPrimary);
+  }
+
+  .title {
+    transition: transform 0.1s;
+  }
+
+  &:has(.close-btn):hover .title {
+    transform: translateX(-4px);
+  }
+
+  .close-btn {
+    position: absolute;
+    right: -6px;
+    display: flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    padding: 2px;
+    opacity: 0;
+    margin-bottom: -1px;
+    transition: all 0.2s;
+    transform: scale(0);
+    color: var(--antd-colorTextTertiary);
+
+    &:hover {
+      color: var(--antd-colorText);
+    }
+  }
+
+  &:hover .close-btn {
+    margin-left: 0;
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.operation-btn {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  font-size: 18px;
+  cursor: pointer;
+  border-radius: 4px;
+
+  &:hover {
+    color: var(--antd-colorPrimaryText);
+  }
+}
+
+.refresh-spin {
+  & {
+    animation: spin 200ms linear;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+</style>

package/admin/layout/large/index.ts

@@ -1,4 +1,64 @@
 export { default as Breadcrumb } from './Breadcrumb.vue';
 export { default as Content } from './Content.vue';
 export { default as Menu } from './Menu.vue';
-export { default as PageTab } from './PageTab.vue';
+export { default as Tabs } from './Tabs.vue';
+export { default as Layout } from './Layout.vue';
+export { default as Notice } from './Notice.vue';
+
+/* #B 优化表格水平滚动（测试版方案） */
+const antTableHeaders = new WeakSet<HTMLElement>();
+setInterval(() => {
+  const $header = document.querySelector('.antd-cover__table-sticky-pagination .ant-table-header') as HTMLElement;
+
+  if (!$header || antTableHeaders.has($header))
+    return;
+
+  antTableHeaders.add($header);
+  $header.addEventListener('wheel', (ev) => {
+    ev.preventDefault();
+    const $body = (ev.currentTarget as HTMLElement).parentElement?.querySelector(':scope > .ant-table-body');
+
+    if ($body) {
+      const left = $body.scrollLeft + (ev.deltaY < 0 ? -100 : 100);
+      $body.scroll({ left });
+    }
+  })
+
+  const tipsKey = 'HIDDEN_TABLE_HORIZONTAL_SCROLLING_PROMPT';
+  const hiddenTips = localStorage.getItem(tipsKey);
+
+  if (!hiddenTips) {
+    const tips = `将鼠标指针移至表头，通过滚动鼠标滚轮来水平滑动表格（点击可关闭此提示）`;
+    const ctn = document.createElement('div');
+    ctn.className = `pos-sticky left-0 top-0 w-full h-full bg-$antd-colorPrimary text-center lh-relaxed text-white`;
+    ctn.innerHTML = tips;
+    ctn.onclick = () => {
+      ctn.remove();
+      localStorage.setItem(tipsKey, '1');
+    };
+    $header.appendChild(ctn);
+  }
+}, 1000);
+/* #E */
+
+/* #B 高亮最后一次操作的表格行 */
+window.addEventListener('click', (ev) => {
+  const targetEle = ev.target as HTMLElement;
+  const closestRow = targetEle.closest('.ant-table-row');
+
+  if (closestRow) {
+    document.querySelectorAll('.last-clicked-cell').forEach((cell) => {
+      cell.classList.remove('ant-table-cell-row-hover');
+      cell.classList.remove('last-clicked-cell');
+    });
+
+    const cells = closestRow.querySelectorAll(':scope > .ant-table-cell');
+    setTimeout(() => {
+      cells.forEach((cell) => {
+        cell.classList.add('ant-table-cell-row-hover');
+        cell.classList.add('last-clicked-cell');
+      });
+    }, 300);
+  }
+});
+/* #E */

package/admin/permission/routerGuard.ts

@@ -1,24 +1,37 @@
 import type { Router } from 'vue-router';
-import { adminPlugin } from '../adminPlugin';
 import { hasToken } from '../../utils';
 
-export function setupPermissionRouterGuard(router: Router, rouneNames: { index: string, login: string, 403: string }) {
+interface TPermission {
+  refresh: () => Promise<any>
+  has: (code: string) => boolean
+}
+
+export function setupPermissionRouterGuard(
+  router: Router,
+  permission: TPermission | undefined,
+  rouneNames: { index: string, login: string, 403: string },
+) {
   router.beforeEach(async (to, _, next) => {
-    const permissionStore = adminPlugin.deps.usePermissionStore();
-    const isLogin = hasToken();
+    let isLogin = hasToken();
     const needLogin = Boolean(to.meta?.requireAuth);
     let hasPermission = false;
 
     if (isLogin) {
-      await permissionStore.refreshPermission();
-
-      const permissionCode = to.meta?.permissionCode;
-      hasPermission = permissionCode ? permissionStore.hasPermission(permissionCode) : true;
+      try {
+        await permission?.refresh();
+        const permissionCode = to.meta?.permissionCode;
+        hasPermission = permissionCode ? (permission?.has(permissionCode) ?? true) : true;
+      }
+      catch (err) {
+        console.error('🤡 获取权限错误:', err);
+        isLogin = false;
+        hasPermission = false;
+      }
     }
 
     // 已登录状态跳转登录页，跳转至首页
     if (isLogin && to.name === rouneNames.login)
-      return next({ name: rouneNames.index, replace: true });
+      return next({ name: rouneNames.index, replace: true, state: { tabType: 2 } });
 
     // 不需要登录权限的页面直接通行
     else if (!needLogin)
@@ -26,7 +39,7 @@ export function setupPermissionRouterGuard(router: Router, rouneNames: { index:
 
     // 未登录状态进入需要登录权限的页面
     else if (!isLogin && needLogin)
-      return next({ name: rouneNames.login, replace: true, query: { redirect: to.fullPath } });
+      return next({ name: rouneNames.login, query: { redirect: to.fullPath }, state: { tabType: 0 }, replace: true });
 
     // 登录状态进入需要登录权限的页面，有权限直接通行
     else if (isLogin && needLogin && hasPermission)
@@ -34,7 +47,7 @@ export function setupPermissionRouterGuard(router: Router, rouneNames: { index:
 
     // 登录状态进入需要登录权限的页面，无权限，重定向到无权限页面
     else if (isLogin && needLogin && !hasPermission)
-      return next({ name: rouneNames[403], replace: true });
+      return next({ name: rouneNames[403], state: { tabType: 0 }, replace: true });
 
     return next(false);
   });

package/admin/permission/vuePlugin.ts

@@ -1,25 +1,22 @@
 import type { App } from 'vue';
 import { watch } from 'vue';
-import { adminPlugin } from '../adminPlugin';
+import type { createAdminPermission } from '../components/provider/admin-permission';
 
 type TCodes = string | string[];
 
 const PLUGIN_NAME = 'has-permission';
 const UNWATCH_NAME = `v-${PLUGIN_NAME}@unwatch`;
 
-export function setupPermissionPlugin(app: App) {
+export function setupPermissionPlugin(app: App, permission: ReturnType<typeof createAdminPermission>) {
   app.directive<HTMLElement, TCodes>(PLUGIN_NAME, {
     mounted(el, binding) {
-      console.log('🤡 / el:', el);
-      const permissionStore = adminPlugin.deps.usePermissionStore();
-
       function updateVisibility() {
         const codes = binding.value;
-        el.style.display = permissionStore.hasPermission(codes) ? '' : 'none';
+        el.style.display = permission.has(codes) ? '' : 'none';
       }
 
       (el as any)[UNWATCH_NAME] = watch(
-        () => permissionStore.permissionCodesStr,
+        () => permission.codes,
         updateVisibility,
         { immediate: true },
       );
@@ -32,9 +29,7 @@ export function setupPermissionPlugin(app: App) {
   app.use({
     install(app) {
       app.config.globalProperties.$hasPermission = (codes: TCodes) => {
-        const permissionStore = adminPlugin.deps.usePermissionStore();
-
-        return permissionStore.hasPermission(codes);
+        return permission.has(codes);
       };
     },
   });

package/admin/route-guards/index.ts

@@ -1,3 +1,2 @@
 export { setupPageProgress } from './pageProgress';
 export { setupPageTitle } from './pageTitle';
-export { setupCollapseMenu } from './collapseMenu';

package/admin/stores/index.ts

@@ -1,3 +1,4 @@
+/* 已弃用 */
 export { createUsePageStore } from './createUsePageStore';
 export { createUseMenuStore } from './createUseMenuStore';
 export { createUsePageTabStore } from './createUsePageTabStore';

package/admin/styles/classCover.scss

@@ -103,7 +103,7 @@
     z-index: 2;
     margin-bottom: -9px !important;
     background-color: var(--pagination-bg-color);
-    box-shadow: 0 0 0 16px var(--pagination-bg-color);
+    box-shadow: 0 0 0 14.5px var(--pagination-bg-color);
   }
 }
 

package/admin/styles/index.scss

@@ -1,5 +1,5 @@
-@import './classCover';
-@import './globalCover';
+@use './classCover';
+@use './globalCover';
 
 @media (pointer: fine) {
 

package/antd/hooks/useAntdModal.ts

@@ -1,6 +1,6 @@
 import { Modal as AntModal } from 'ant-design-vue';
-import { tryOnUnmounted } from '@vueuse/core';
-import { createVNode, defineComponent, isProxy, onMounted, reactive, toRef, toRefs } from 'vue';
+import { tryOnBeforeUnmount, tryOnMounted } from '@vueuse/core';
+import { createVNode, defineComponent, isProxy, onDeactivated, onMounted, reactive, toRef, toRefs } from 'vue';
 import type { Component } from 'vue';
 import type { ModalProps } from 'ant-design-vue';
 import type { ComponentEmit, ComponentProps } from 'vue-component-type-helpers';
@@ -53,8 +53,10 @@ export function useAntdModal<Comp extends Component>(
     ...defaultModalProps,
     ...isProxy(modalProps) ? toRefs(modalProps) : modalProps,
     confirmLoading: toRef(() => (refs.comp as any)?.loading),
-    onOk: (e: MouseEvent) => {
-      (refs.comp as any)?.confirm?.(e);
+    onOk: async (e: MouseEvent) => {
+      const comp = refs.comp as any;
+      const isClosed = await comp?.confirm?.(e, (data: any) => promiseResolvers?.resolve(data));
+      // isClosed  === true && (_modalProps.open = false);
       modalProps.onOk?.(e);
     },
   });
@@ -72,24 +74,35 @@ export function useAntdModal<Comp extends Component>(
     newCompProps?: typeof compProps,
     newAntdModalProps?: Omit<Partial<ModalProps>, 'open'>,
   ) => {
-    Object.assign(_modalProps, newAntdModalProps);
-    Object.assign(compProps, newCompProps);
-
     if (_modalProps.open) {
       // return Promise.reject(new Error('Modal is already open'));
       return;
     }
 
+    Object.assign(_modalProps, newAntdModalProps);
+
+    // eslint-disable-next-line no-lone-blocks
+    {
+      if (!(comp as any).props) {
+        Object.keys(compProps).forEach((key) => {
+          if (!['ref', 'onClose', 'onConfirm'].includes(key))
+            delete compProps[key];
+        });
+      }
+
+      Object.assign(compProps, newCompProps);
+    }
+
     promiseResolvers = Promise.withResolvers();
     _modalProps.open = true;
 
     return promiseResolvers.promise;
   };
-  const confirm = (ev: any) => {
+  const onConfirm = (ev: any) => {
     _modalProps.open = false;
     promiseResolvers.resolve(ev);
   };
-  const close = (reason?: any) => {
+  const onClose = (reason?: any) => {
     _modalProps.open = false;
     _onClose(reason);
   };
@@ -111,10 +124,11 @@ export function useAntdModal<Comp extends Component>(
     !visiable && _onClose();
   };
   (compProps as any).ref = setRefs.comp;
-  (compProps as any).onClose = close;
-  (compProps as any).onConfirm = confirm;
+  (compProps as any).onClose = onClose;
+  (compProps as any).onConfirm = onConfirm;
 
-  tryOnUnmounted(_onClose);
+  tryOnBeforeUnmount(_onClose);
+  tryOnMounted(() => onDeactivated(_onClose));
 
   return {
     PresetComponent,
@@ -124,6 +138,6 @@ export function useAntdModal<Comp extends Component>(
       return refs.comp;
     },
     open,
-    close,
+    close: onClose,
   };
 }