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

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,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,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 14.5px 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

@@ -1,4 +1,4 @@
-import { computed, reactive, ref } from 'vue';
+import { computed, reactive, ref, toValue } from 'vue';
 import { pick } from 'lodash-es';
 import type { UseQueryReturnType } from '@tanstack/vue-query';
 import type { Table, TableProps } from 'ant-design-vue';
@@ -54,7 +54,7 @@ export function useAntdTable<
       }
     }
   };
-  const defineColumns = (columnsGetter: () => LocalColumnsType) => computed(columnsGetter);
+  const { defineColumns } = useTableColumns<LocalColumnsType>();
   const defineRowSelection = (rowSelectionGetter: () => LocalTableRowSelection = () => ({})) => {
     const rowSelection = reactive(rowSelectionGetter());
 
@@ -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,
@@ -126,3 +128,51 @@ type GetRecordType<T> = T extends UseQueryReturnType<infer D, any>
     ? NonNullable<D['list']>[0]
     : never
   : never;
+
+function useTableColumns<LCT extends any[]>() {
+  type ColumnConfig = {title: string, dataIndex: string, visible: boolean}
+
+  const columnsConfig = ref<Array<ColumnConfig> | null>(null);
+  let originalColumns: LCT | null = null;
+
+  const defineColumns = (columnsGetter: () => LCT) => {
+    originalColumns = toValue(columnsGetter) || [] as unknown as LCT;
+
+    return computed(() => {
+      const config =  columnsConfig.value;
+      let columns = columnsGetter();
+
+      if (config?.length) {
+        // 过滤掉不可见的列
+        columns = columns.filter((col: any) => {
+          const x = config.find(c => c.dataIndex === col.dataIndex);
+          return x ? x.visible : true;
+        }) as LCT;
+        // 基于 config 的顺序排序
+        columns = config.map(x => {
+          const col = columns.find(c => c.dataIndex === x.dataIndex);
+          return col ? col : null;
+        }).filter(Boolean) as LCT;
+      }
+
+      return columns;
+    })
+  };
+
+  const setColumnsConfig = (columns: Array<ColumnConfig>) => {
+    columnsConfig.value = columns;
+
+    // if (!columnsConfig.value) {
+    //   columnsConfig.value = originalColumns?.map(col => ({
+    //     title: col.title,
+    //     dataIndex: col.dataIndex as string,
+    //     visible: true,
+    //   })) || [];
+    // }
+  };
+
+
+  return {
+    defineColumns,
+  };
+}

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');

package/libs/fingerprintjs.ts

@@ -0,0 +1 @@
+export * from '@fingerprintjs/fingerprintjs';