@peng_kai/kit 0.3.0-beta.1 → 0.3.0-beta.10

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,140 @@
+<script lang="ts">
+import { 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';
+
+const noticeAudio = new Audio(audioURL);
+noticeAudio.src = audioURL;
+noticeAudio.muted = true;
+document.body.append(noticeAudio);
+
+const logoFaviconEle = document.querySelector('link[rel="icon"]');
+const numFaviconEle = document.createElement('link');
+numFaviconEle.rel = 'icon';
+const numCanvas = document.createElement('canvas') as (HTMLCanvasElement & { num: number });
+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<TNotice[], Error>
+}>()
+
+const router = useRouter();
+const visible = ref(false);
+const noticeNum = computed(() => props.noticesQry.data.value?.length ?? 0);
+
+function operate(notice: TNotice) {
+  if (router.currentRoute.value.path !== notice.url) {
+    router.push(notice.url);
+  }
+}
+
+watch(noticeNum, (num = 0, oldNum = 0) => {
+  num > oldNum && noticeAudio.play();
+}, { immediate: true });
+
+useIntervalFn(() => {
+  const num = noticeNum.value;
+
+  if (!num || document.visibilityState === 'visible') {
+    if (numFaviconEle.parentNode) {
+      numFaviconEle.remove();
+      logoFaviconEle && document.head.appendChild(logoFaviconEle);
+    }
+    return;
+  }
+
+  if (logoFaviconEle?.parentNode) {
+    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);
+    }
+
+    numFaviconEle.href = numCanvas.toDataURL();
+    logoFaviconEle.parentNode.replaceChild(numFaviconEle, logoFaviconEle);
+  }
+  else {
+    numFaviconEle.parentNode?.replaceChild(logoFaviconEle!, numFaviconEle);
+  }
+}, 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">
+          <MenuItem v-for="(item, i) of noticesQry.data.value" :key="i" @click="operate(item)">
+          <div class="min-w-50">
+            <div>{{ item.title }}</div>
+            <div class="mt-1 text-xs text-$antd-colorTextSecondary">
+              {{ dayjs().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,177 @@
+<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 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="emits('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,6 @@
 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';

package/admin/permission/routerGuard.ts

@@ -1,24 +1,31 @@
 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();
     const needLogin = Boolean(to.meta?.requireAuth);
     let hasPermission = false;
 
     if (isLogin) {
-      await permissionStore.refreshPermission();
+      await permission?.refresh();
 
       const permissionCode = to.meta?.permissionCode;
-      hasPermission = permissionCode ? permissionStore.hasPermission(permissionCode) : true;
+      hasPermission = permissionCode ? (permission?.has(permissionCode) ?? true) : true;
     }
 
     // 已登录状态跳转登录页，跳转至首页
     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 +33,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 +41,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 14px var(--pagination-bg-color);
   }
 }
 

package/admin/styles/globalCover.scss

@@ -11,6 +11,10 @@
     .ant-pagination {
       margin-bottom: 0;
     }
+
+    .ant-table-header {
+      line-height: 2.4;
+    }
   }
 
 

package/admin/styles/index.scss

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

package/antd/hooks/useAntdForm.helpers.ts

@@ -74,9 +74,10 @@ function groupingForm(groupName: string, items: Record<string, FormItemProps>) {
  * 格式化表单项组
  * @param name - 组名
  * @param items - 包含表单数据
+ * @param removeTempKey - 是否移除临时字段（建议删除前克隆 items）
  * @returns 返回一个数组，其元素为分组后的表单项对象，如果没有找到匹配的组名，则返回 undefined
  */
-function formatGroup(name: string, items: Record<string, any>) {
+function formatGroup(name: string, items: Record<string, any>, removeTempKey = false) {
   const group: any[] = [];
 
   for (const k in items) {
@@ -89,6 +90,14 @@ function formatGroup(name: string, items: Record<string, any>) {
     group[params.index][params.fieldName] = items[k];
   }
 
+  if (removeTempKey) {
+    const keyRE = new RegExp(`^${name}${GROUP_SEP}\\d+${GROUP_SEP}`);
+    Object.keys(items).forEach((key) => {
+      if (keyRE.test(key))
+        delete items[key];
+    });
+  }
+
   return group?.length ? group.filter(g => !!g) : undefined;
 }
 

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 } 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';
@@ -72,14 +72,25 @@ 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;
 
@@ -95,11 +106,11 @@ export function useAntdModal<Comp extends Component>(
   };
 
   const PresetComponent = defineComponent({
-    setup() {
+    setup(props) {
       onMounted(() => _modalProps.opener?.(open as any));
 
       return () => {
-        return createVNode(AntModal, _modalProps, {
+        return createVNode(AntModal, { ..._modalProps, ...props }, {
           [modalSlotName]: () => createVNode(_comp.is, compProps as any),
         });
       };
@@ -114,7 +125,8 @@ export function useAntdModal<Comp extends Component>(
   (compProps as any).onClose = close;
   (compProps as any).onConfirm = confirm;
 
-  tryOnUnmounted(_onClose);
+  tryOnBeforeUnmount(_onClose);
+  onDeactivated(_onClose);
 
   return {
     PresetComponent,

package/antd/hooks/useAntdTable.ts

@@ -78,8 +78,10 @@ export function useAntdTable<
         showSizeChanger: true,
         showQuickJumper: true,
         pageSizeOptions,
+        size: 'default',
         showTotal: total => `共 ${total} 条`,
       },
+      size: 'small',
       loading: isLoading.value,
       scroll: { x: 'max-content' },
       sticky: true,

package/antd/hooks/useAntdTheme.ts

@@ -20,6 +20,13 @@ export function useAntdTheme(mode: Ref<string>, config: Ref<Record<string, any>>
     const token: ThemeConfig['token'] = {
       ...algorithm({ ...theme.defaultSeed, colorPrimary: _config.colors.primary.DEFAULT, colorInfo: '#17B2FF' }),
       borderRadius: 4,
+
+      motionUnit: 0.05,
+      motionBase: 0,
+      motionDurationFast: "0.05s",
+      motionDurationMid: "0.1s",
+      motionDurationSlow: "0.15s",
+
       screenXS,
       screenXSMin: screenXS,
       screenXSMax: screenSM - 0.1,

package/antd/index.ts

@@ -5,4 +5,4 @@ export { useAntdForm } from './hooks/useAntdForm';
 export { useAntdTheme } from './hooks/useAntdTheme';
 export { createAntdModal } from './hooks/createAntdModal';
 export { default as InputNumberRange } from './components/InputNumberRange.vue';
-export type { SchemaConfig, ItemSchema } from './hooks/useAntdForm.ts';
+export type { SchemaConfig, ItemSchema } from './hooks/useAntdForm.ts';

package/libs/bignumber.ts

@@ -1,2 +1,2 @@
 export { default } from 'bignumber.js';
-export { BigNumber } from 'bignumber.js';
+export { type BigNumber } from 'bignumber.js';

package/libs/dayjs.ts

@@ -5,15 +5,25 @@ import weekday from 'dayjs/esm/plugin/weekday';
 import localeData from 'dayjs/esm/plugin/localeData';
 import utc from 'dayjs/esm/plugin/utc';
 import tz from 'dayjs/esm/plugin/timezone';
+import weekOfYear from 'dayjs/esm/plugin/weekOfYear';
+import weekYear from 'dayjs/esm/plugin/weekYear';
+import quarterOfYear from 'dayjs/esm/plugin/quarterOfYear';
+import advancedFormat from 'dayjs/esm/plugin/advancedFormat';
+import customParseFormat from 'dayjs/esm/plugin/customParseFormat';
 import 'dayjs/esm/locale/zh';
 import 'dayjs/esm/locale/en';
 
 export type { Dayjs, PluginFunc, UnitType, UnitTypeLong, UnitTypeLongPlural, UnitTypeShort, QUnitType, ConfigType, ConfigTypeMap, OpUnitType, OptionType, ManipulateType } from 'dayjs';
 export default dayjs;
 
-dayjs.locale('zh');
 dayjs.extend(relativeTime);
 dayjs.extend(weekday);
 dayjs.extend(localeData);
 dayjs.extend(utc);
 dayjs.extend(tz);
+dayjs.extend(weekOfYear);
+dayjs.extend(weekYear);
+dayjs.extend(quarterOfYear);
+dayjs.extend(advancedFormat);
+dayjs.extend(customParseFormat);
+dayjs.locale('zh');