@peng_kai/kit 0.3.0-beta.4 → 0.3.0-beta.40

package/admin/layout/large/Layout.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useScroll, useMutationObserver } from '@vueuse/core'
+
+const hiddenSiderbar = ref(false);
+const $content = ref<HTMLElement>();
+const { arrivedState, measure } = useScroll($content);
+const contentCssVars = computed(() => {
+  const {top: arrivedTop, bottom: arrivedBtm} = arrivedState;
+  return {
+    '--top-e': arrivedTop ? '0%' : '5px',
+    '--btm-s': arrivedBtm ? '100%' : '99.5%',
+    // 'margin-top': arrivedTop ? '0' : '-5px',
+  };
+})
+
+useMutationObserver($content, () => {
+  setTimeout(measure, 100)
+}, { childList: true });
+</script>
+
+<template>
+  <div class="app-layout" :class="{ 'hidden-siderbar': hiddenSiderbar }">
+    <div class="app-logo select-none [grid-area:logo] ">
+      <slot name="logo" />
+    </div>
+
+    <div class="app-header select-none [grid-area:header]">
+      <!-- <div
+        class="text-6 flex items-center h-7 -mr-5 cursor-pointer"
+        @click="hiddenSiderbar = !hiddenSiderbar"
+      >
+        <i class="i-material-symbols:menu-open-rounded" :class="{ 'rotate-180': hiddenSiderbar }" />
+      </div> -->
+      <slot name="header" />
+    </div>
+
+    <div v-show="!hiddenSiderbar" class="app-siderbar select-none [grid-area:siderbar]">
+      <slot name="siderbar" />
+    </div>
+
+    <div ref="$content" class="app-content [grid-area:content]" :style="contentCssVars">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-layout {
+  box-sizing: border-box;
+  display: grid;
+  grid-template:
+    "logo     header"   56px
+    "siderbar content"  1fr
+    / 180px   1fr;
+  column-gap: 8px;
+  width: 100vw;
+  height: 100vh;
+  padding: 0 8px 8px;
+  background-color: var(--antd-colorBgLayout);
+
+  &.hidden-siderbar {
+    grid-template:
+    "logo     header"   56px
+    "content content"  1fr
+    / 130px   1fr;
+
+    .app-logo {
+      justify-content: start;
+    }
+  }
+}
+
+.app-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--antd-colorPrimary)
+}
+
+.app-siderbar {
+  position: relative;
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  margin-right: -6px;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+
+// @property --top-e {
+//   syntax: "<percentage>";
+//   initial-value: 0%;
+//   inherits: false;
+// }
+// @property --btm-s {
+//   syntax: "<percentage>";
+//   initial-value: 100%;
+//   inherits: false;
+// }
+
+.app-content {
+  --top-s: 0%;
+  --top-e: 0%;
+  --btm-s: 99%;
+  --btm-e: 100%;
+
+  margin-right: -6px;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  mask-image: linear-gradient(
+    to bottom, 
+    #0000 var(--top-s),
+    #000 var(--top-e), 
+    #000 var(--btm-s), 
+    #0000 var(--btm-e)
+  );
+  transition: --top-e 0.05s, --btm-s 0.05s;
+}
+
+.app-header {
+  display: flex;
+  align-items: center;
+  gap: 36px;
+}
+</style>

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,168 @@
+<script lang="ts">
+import { useEventListener, useIntervalFn, useLocalStorage } from '@vueuse/core';
+import { Empty, Dropdown, Badge, Menu, MenuItem } from 'ant-design-vue';
+import { type UseQueryReturnType } from '@tanstack/vue-query'
+import { ref, computed, customRef, triggerRef } from 'vue'
+import dayjs from '../../../libs/dayjs';
+import { useRouter } from 'vue-router';
+import audioURL from './y682.mp3?url';
+
+function useAudioMuted(audio: HTMLAudioElement, cacheKey: string) {
+  const audioMutedCache = useLocalStorage(cacheKey, false);
+  const audioMuted = customRef<boolean>((track, tracker) => ({
+    get: () => {
+      track();
+      return audio.muted;
+    },
+    set: (val) => {
+      audio.muted = audioMutedCache.value = val;
+      tracker();
+    }
+  }));
+
+  useEventListener(document, 'click', () => {
+    audio.muted = audioMutedCache.value;
+    triggerRef(audioMuted);
+  }, {once: true});
+
+  return audioMuted;
+}
+
+const noticeAudio = new Audio(audioURL);
+noticeAudio.muted = true;
+noticeAudio.src = audioURL;
+document.body.append(noticeAudio);
+export const audioMuted = useAudioMuted(noticeAudio, 'notice_audio_muted');
+
+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);
+  }
+}
+
+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);
   });