@pubinfo/core 2.0.0-rc.2 → 2.0.0-rc.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pubinfo/core",
   "type": "module",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0-rc.4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -22,17 +22,17 @@
     "alova": "^3.3.4",
     "pinia": "^3.0.3",
     "vue": "^3.5.17",
-    "vue-i18n": "^10.0.7",
     "vue-router": "^4.5.1",
-    "@pubinfo/config": "2.0.0-rc.2",
-    "@pubinfo/vite": "2.0.0-rc.2"
+    "@pubinfo/config": "2.0.0-rc.4",
+    "@pubinfo/vite": "2.0.0-rc.4"
   },
   "dependencies": {
     "@alova/adapter-axios": "^2.0.16",
+    "@alova/shared": "^1.3.1",
     "@ant-design/icons-vue": "^7.0.1",
     "@headlessui/vue": "^1.7.23",
     "@imengyu/vue3-context-menu": "^1.5.1",
-    "@pubinfo/pro-components": "^1.7.1",
+    "@pubinfo/pro-components": "^1.7.3",
     "@unocss/reset": "^66.4.2",
     "@vueuse/core": "^13.7.0",
     "@vueuse/integrations": "^13.5.0",
@@ -58,10 +58,11 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
+    "@alova/mock": "^2.0.17",
     "@iconify/json": "^2.2.354",
     "@iconify/vue": "^5.0.0",
-    "@pubinfo/openapi": "^0.8.4",
-    "@pubinfo/preset-openapi": "^0.8.4",
+    "@pubinfo/openapi": "^0.9.0",
+    "@pubinfo/preset-openapi": "^0.9.0",
     "@types/lodash-es": "^4.17.12",
     "@types/md5": "^2.3.5",
     "@types/nprogress": "^0.2.3",
@@ -80,13 +81,12 @@
     "vite": "^7.1.2",
     "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.17",
-    "vue-i18n": "^10.0.7",
     "vue-router": "^4.5.1",
-    "@pubinfo/config": "2.0.0-rc.2",
-    "@pubinfo/vite": "2.0.0-rc.2"
+    "@pubinfo/config": "2.0.0-rc.4",
+    "@pubinfo/vite": "2.0.0-rc.4"
   },
   "scripts": {
-    "dev": "vite build -w -m watch --sourcemap",
+    "dev": "vite build -w -m watch",
     "build": "vite build",
     "openapi": "pnpx @pubinfo/openapi generate"
   }

package/src/built-in/authentication/alova/helper.ts

@@ -0,0 +1,158 @@
+import type {
+  AlovaRequestAdapter,
+  Method,
+  RespondedHandler,
+  ResponseCompleteHandler,
+  ResponseErrorHandler,
+  StatesHook,
+} from 'alova';
+import type {
+  AlovaResponded,
+  MetaMatches,
+  ResponseAuthorizationInterceptor,
+  StateHookAdapter2AG,
+} from 'alova/client';
+import {
+  falseValue,
+  forEach,
+  instanceOf,
+  isFn,
+  isPlainObject,
+  len,
+  newInstance,
+  noop,
+  PromiseCls,
+  pushItem,
+  splice,
+  trueValue,
+  undefinedValue,
+} from '@alova/shared';
+
+export type PosibbleAuthMap
+  = | {
+    metaMatches?: MetaMatches
+    handler: any
+  }
+  | undefined;
+export type WaitingRequestList = {
+  method: Method
+  resolve: () => void
+}[];
+
+export const defaultVisitorMeta = {
+  authRole: null,
+};
+export const defaultLoginMeta = {
+  authRole: 'login',
+};
+export const defaultLogoutMeta = {
+  authRole: 'logout',
+};
+export const defaultRefreshTokenMeta = {
+  authRole: 'refreshToken',
+};
+export function checkMethodRole({ meta }: Method, metaMatches: MetaMatches) {
+  if (isPlainObject(meta)) {
+    for (const key in meta) {
+      if (Object.prototype.hasOwnProperty.call(meta, key)) {
+        const matchedMetaItem = metaMatches[key];
+        if (instanceOf(matchedMetaItem, RegExp) ? matchedMetaItem.test(meta[key]) : meta[key] === matchedMetaItem) {
+          return trueValue;
+        }
+      }
+    }
+  }
+  return falseValue;
+}
+export function waitForTokenRefreshed(method: Method, waitingList: WaitingRequestList) {
+  return newInstance(PromiseCls, (resolve) => {
+    pushItem(waitingList, {
+      method,
+      resolve,
+    });
+  });
+}
+export function callHandlerIfMatchesMeta(method: Method,
+  authorizationInterceptor: ResponseAuthorizationInterceptor<AlovaRequestAdapter<any, any, any>> | undefined,
+  defaultMeta: MetaMatches,
+  response: any) {
+  if (checkMethodRole(method, (authorizationInterceptor as PosibbleAuthMap)?.metaMatches || defaultMeta)) {
+    const handler = isFn(authorizationInterceptor)
+      ? authorizationInterceptor
+      : isPlainObject(authorizationInterceptor) && isFn(authorizationInterceptor.handler)
+        ? authorizationInterceptor.handler
+        : noop;
+    return handler(response, method);
+  }
+}
+export async function refreshTokenIfExpired(method: Method,
+  waitingList: WaitingRequestList,
+  updateRefreshStatus: (status: boolean) => void,
+  handlerParams: any[],
+  refreshToken?: {
+    isExpired: (...args: any[]) => boolean | Promise<boolean>
+    handler: (...args: any[]) => Promise<void>
+  },
+  tokenRefreshing?: boolean) {
+  // When the number of handle params is greater than 2, it means that this function is called from the response, and the original interface needs to be requested again.
+  const fromResponse = len(handlerParams) >= 2;
+  let isExpired = refreshToken?.isExpired(...handlerParams);
+  // Compatible with synchronous and asynchronous functions
+  if (instanceOf(isExpired, PromiseCls)) {
+    isExpired = await isExpired;
+  }
+
+  if (isExpired) {
+    try {
+      // Make another judgment in the response to prevent multiple requests to refresh the token, intercept and wait for the token sent before the token refresh is completed.
+      let intentToRefreshToken = trueValue;
+      if (fromResponse && tokenRefreshing) {
+        intentToRefreshToken = falseValue; // The requests waiting here indicate that the token is being refreshed. When they pass, there is no need to refresh the token again.
+        await waitForTokenRefreshed(method, waitingList);
+      }
+
+      if (intentToRefreshToken) {
+        updateRefreshStatus(trueValue);
+        // Call refresh token
+        await refreshToken?.handler(...handlerParams);
+        updateRefreshStatus(falseValue);
+        // After the token refresh is completed, the requests in the waiting list are notified.
+        forEach(waitingList, ({ resolve }) => resolve());
+      }
+      if (fromResponse) {
+        // Because the original interface is being requested again, superposition with the previous request will result in repeated calls to transform, so it is necessary to leave transform empty to remove one call.
+        const { config } = method;
+        const methodTransformData = config.transform;
+        config.transform = undefinedValue;
+        const resentData = await method;
+        config.transform = methodTransformData;
+        return resentData;
+      }
+    }
+    finally {
+      updateRefreshStatus(falseValue);
+      splice(waitingList, 0, len(waitingList)); // Clear waiting list
+    }
+  }
+}
+
+export function onResponded2Record<SH extends StatesHook<any>, RA extends AlovaRequestAdapter<any, any, any>>(onRespondedHandlers?: AlovaResponded<SH, RA>) {
+  type AG = StateHookAdapter2AG<SH, RA>;
+  let successHandler: RespondedHandler<AG> | undefined = undefinedValue;
+  let errorHandler: ResponseErrorHandler<AG> | undefined = undefinedValue;
+  let onCompleteHandler: ResponseCompleteHandler<AG> | undefined = undefinedValue;
+  if (isFn(onRespondedHandlers)) {
+    successHandler = onRespondedHandlers;
+  }
+  else if (isPlainObject(onRespondedHandlers)) {
+    const { onSuccess, onError, onComplete } = onRespondedHandlers;
+    successHandler = isFn(onSuccess) ? onSuccess : successHandler;
+    errorHandler = isFn(onError) ? onError : errorHandler;
+    onCompleteHandler = isFn(onComplete) ? onComplete : onCompleteHandler;
+  }
+  return {
+    onSuccess: successHandler,
+    onError: errorHandler,
+    onComplete: onCompleteHandler,
+  };
+}

package/src/built-in/authentication/alova/token.ts

@@ -0,0 +1,122 @@
+import type { AlovaRequestAdapter, Method, StatesHook } from 'alova';
+import type {
+  AlovaRequestAdapterUnified,
+  BeforeRequestType,
+  ServerTokenAuthenticationOptions,
+} from 'alova/client';
+import type { FetchRequestAdapter } from 'alova/fetch';
+import type {
+  PosibbleAuthMap,
+  WaitingRequestList } from './helper';
+import { $self, falseValue, noop } from '@alova/shared';
+import {
+  callHandlerIfMatchesMeta,
+  checkMethodRole,
+  defaultLoginMeta,
+  defaultLogoutMeta,
+  defaultRefreshTokenMeta,
+  defaultVisitorMeta,
+  refreshTokenIfExpired,
+  waitForTokenRefreshed,
+} from './helper';
+
+/**
+ * Create a server-side token authentication interceptor
+ * @returns token authentication interceptor function
+ */
+export function createServerTokenAuthentication<
+  SH extends StatesHook<any>,
+  RA extends
+  | AlovaRequestAdapter<any, any, any>
+  | ((...args: any[]) => AlovaRequestAdapter<any, any, any>) = FetchRequestAdapter,
+>({
+  visitorMeta,
+  login,
+  logout,
+  refreshTokenOnSuccess,
+  refreshTokenOnError,
+  assignToken = noop,
+}: ServerTokenAuthenticationOptions<AlovaRequestAdapterUnified<RA>>) {
+  let tokenRefreshing = falseValue;
+  const waitingList: WaitingRequestList = [];
+
+  const onAuthRequired: BeforeRequestType<SH, AlovaRequestAdapterUnified<RA>> = onBeforeRequest => async (method) => {
+    const isVisitorRole = checkMethodRole(method, visitorMeta || defaultVisitorMeta);
+    const isLoginRole = checkMethodRole(method, (login as PosibbleAuthMap)?.metaMatches || defaultLoginMeta);
+    // Ignored, login, and token refresh requests do not perform token authentication.
+    if (
+      !isVisitorRole
+      && !isLoginRole
+      && !checkMethodRole(method, (refreshTokenOnSuccess as PosibbleAuthMap)?.metaMatches || defaultRefreshTokenMeta)
+      && !checkMethodRole(method, (refreshTokenOnError as PosibbleAuthMap)?.metaMatches || defaultRefreshTokenMeta)
+    ) {
+      // If the token is being refreshed, wait for the refresh to complete before sending a request.
+      if (tokenRefreshing) {
+        await waitForTokenRefreshed(method, waitingList);
+      }
+    }
+    if (!isVisitorRole && !isLoginRole) {
+      await assignToken(method);
+    }
+    return onBeforeRequest?.(method);
+  };
+
+  const onResponseRefreshToken = () => {
+    return {
+      onSuccess: async (response: any, method: Method, stop: any) => {
+        if (
+          !checkMethodRole(method, visitorMeta || defaultVisitorMeta)
+          && !checkMethodRole(method, (login as PosibbleAuthMap)?.metaMatches || defaultLoginMeta)
+          && !checkMethodRole(method, (refreshTokenOnSuccess as PosibbleAuthMap)?.metaMatches || defaultRefreshTokenMeta)
+        ) {
+          const dataResent = await refreshTokenIfExpired(
+            method,
+            waitingList,
+            (refreshing) => {
+              tokenRefreshing = refreshing;
+            },
+            [response, method],
+            refreshTokenOnSuccess,
+            tokenRefreshing,
+          );
+          if (dataResent) {
+            stop();
+            return dataResent;
+          }
+        }
+
+        await callHandlerIfMatchesMeta(method, login, defaultLoginMeta, response);
+        await callHandlerIfMatchesMeta(method, logout, defaultLogoutMeta, response);
+        return $self(response);
+      },
+      onError: async (error: any, method: Method) => {
+        if (
+          !checkMethodRole(method, visitorMeta || defaultVisitorMeta)
+          && !checkMethodRole(method, (login as PosibbleAuthMap)?.metaMatches || defaultLoginMeta)
+          && !checkMethodRole(method, (refreshTokenOnError as PosibbleAuthMap)?.metaMatches || defaultRefreshTokenMeta)
+        ) {
+          const dataResent = await refreshTokenIfExpired(
+            method,
+            waitingList,
+            (refreshing) => {
+              tokenRefreshing = refreshing;
+            },
+            [error, method],
+            refreshTokenOnError,
+            tokenRefreshing,
+          );
+          if (dataResent) {
+            return dataResent;
+          }
+        }
+        return noop;
+      },
+    };
+  };
+
+  return {
+    waitingList,
+    onAuthRequired,
+    onResponseRefreshToken,
+  };
+}

package/src/built-in/authentication/helper.ts

@@ -1,13 +1,16 @@
-import type { axiosRequestAdapter } from '@alova/adapter-axios';
+import type { AxiosRequestAdapter, axiosRequestAdapter } from '@alova/adapter-axios';
+import type { AlovaRequestAdapterUnified, ServerTokenAuthenticationOptions } from 'alova/client';
 import type VueHook from 'alova/vue';
 import type { AxiosResponse } from 'axios';
 import type { RequestResult } from './interface';
-import { createServerTokenAuthentication } from 'alova/client';
 import { postAuthTokenRefresh } from '@/features/api/modules/auth';
 import { useUserStore } from '@/features/stores';
+import { createServerTokenAuthentication } from './alova/token';
 import { RESPONSE_CODE } from './enum';
 
-export function createTokenAuthentication() {
+export function createTokenAuthentication(
+  options: ServerTokenAuthenticationOptions<AlovaRequestAdapterUnified<AxiosRequestAdapter>> = {},
+) {
   return createServerTokenAuthentication<typeof VueHook, typeof axiosRequestAdapter>({
     /**
      * 给权限接口添加Authorization
@@ -51,5 +54,6 @@ export function createTokenAuthentication() {
         userStore.setToken(accessToken, refreshToken);
       },
     },
+    ...options,
   });
 }

package/src/built-in/authentication/index.ts

@@ -1,5 +1,5 @@
 import type { ModuleOptions } from '@/core';
-// import { createTokenAuthentication } from './helper';
+import { createTokenAuthentication } from './helper';
 import { createRouterGuard } from './router';
 
 /**
@@ -8,21 +8,7 @@ import { createRouterGuard } from './router';
  * 双 token 校验，确认用户身份，注册修改密码和切换组织页面
  */
 export function Authentication(): ModuleOptions {
-  // TODO 以 hooks 的形式注册 alova 的 Token 认证拦截器，
-  // Token 过期时的请求，在刷新完 Token 后虽然会重新请求，但是过期请求还是会继续抛出错误。
-  // 若是用如下形式注册，则没有问题：
-  // const alova = createAlova({
-  //   beforeRequest: onAuthRequired(method => {
-  //   }),
-  //   responded: onResponseRefreshToken({
-  //     onSuccess(response, method) {
-  //     },
-  //     onError(error, method) {
-  //     },
-  //   })
-  // });
-
-  // const { onAuthRequired, onResponseRefreshToken } = createTokenAuthentication();
+  const { onAuthRequired, onResponseRefreshToken } = createTokenAuthentication();
 
   return {
     name: 'built-in:authentication',
@@ -30,10 +16,10 @@ export function Authentication(): ModuleOptions {
       const { router } = ctx;
       createRouterGuard(router);
     },
-    // hooks: {
-    //   'http:request': onAuthRequired(),
-    //   'http:response': onResponseRefreshToken(),
-    // },
+    hooks: {
+      'http:request': onAuthRequired(),
+      'http:response': onResponseRefreshToken(),
+    },
   };
 }
 

package/src/built-in/index.ts

@@ -1,7 +1,6 @@
 export * from './authentication';
 export * from './authorization';
 export * from './layout-component';
-export * from './locales';
 export * from './n-progress';
 export * from './pinia-plugin';
 export * from './pre-access';

package/src/built-in/layout-component/Layout.vue

@@ -4,30 +4,23 @@ import BackTop from './components/BackTop/index.vue';
 import LayoutContent from './components/Content/index.vue';
 import Copyright from './components/Copyright/index.vue';
 import LayoutHeader from './components/Header/index.vue';
-
 import SettingBar from './components/SettingBar/index.vue';
-// import Sidebar from './components/Sidebar/index.vue';
-import MainSidebar from './components/Sidebar/MainSidebar.vue';
-import SubSidebar from './components/Sidebar/SubSidebar.vue';
-import Topbar from './components/Topbar/index.vue';
+import LayoutSidebar from './components/Sidebar/index.vue';
+import LayoutTopbar from './components/Topbar/index.vue';
+
 import { useContext } from './composables/useContext';
 import { useGetSidebarActualWidth } from './composables/useGetComputedStyle';
 import { useHotkey } from './composables/useHotkey';
-import useWatermark from './composables/useWatermark';
+import { useWatermark } from './composables/useWatermark';
 
 defineOptions({
   name: 'Layout',
 });
 
 const routeInfo = useRoute();
-const { settingsStore, menuStore } = useContext();
+const { settingsStore } = useContext();
 const { mainSidebarActualWidth, subSidebarActualWidth } = useGetSidebarActualWidth();
-
-useHotkey({
-  settingsStore,
-  menuStore,
-});
-
+useHotkey();
 useWatermark();
 
 watch(() => settingsStore.settings.menu.subMenuCollapse, (val) => {
@@ -68,13 +61,9 @@ watch(() => routeInfo.path, () => {
           class="sidebar-container"
           :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.settings.menu.subMenuCollapse }"
         >
-          <!-- TODO 这种写法会导致侧边栏模式的布局下，有样式问题 -->
-          <!-- <slot name="sidebar">
-              <Sidebar />
-            </slot> -->
-
-          <MainSidebar />
-          <SubSidebar />
+          <slot name="sidebar">
+            <LayoutSidebar />
+          </slot>
         </div>
 
         <div
@@ -85,7 +74,7 @@ watch(() => routeInfo.path, () => {
 
         <div class="main-container" :style="{ 'padding-bottom': routeInfo.meta.paddingBottom }">
           <slot name="topbar">
-            <Topbar />
+            <LayoutTopbar />
           </slot>
 
           <div class="main">
@@ -213,7 +202,7 @@ watch(() => routeInfo.path, () => {
   --at-apply: visible op-100;
 }
 
-.wrapper .main-sidebar-container:not(.main-sidebar-leave-active) + .sub-sidebar-container {
+.wrapper ::v-deep(.main-sidebar-container:not(.main-sidebar-leave-active) + .sub-sidebar-container) {
   --at-apply: left-[--g-main-sidebar-width];
 }
 

package/src/built-in/layout-component/components/Header/TopMode/index.vue

@@ -4,7 +4,7 @@ import { useElementSize } from '@vueuse/core';
 import SolarWidget5BoldDuotone from '~icons/solar/widget-5-bold-duotone';
 import { PubinfoIcon } from '@/features/components';
 import { useContext } from '../../../composables/useContext';
-import useMenu from '../../../composables/useMenu';
+import { useMenu } from '../../../composables/useMenu';
 import More from './More.vue';
 import NotCursor from './NotCursor.vue';
 
@@ -12,7 +12,7 @@ defineOptions({
   name: 'TopMode',
 });
 
-const { settingsStore, menuStore, generateI18nTitle } = useContext();
+const { settingsStore, menuStore, generateTitle } = useContext();
 const { switchTo } = useMenu();
 
 function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
@@ -113,7 +113,7 @@ onMounted(() => {
                 'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,
                 'rounded-2': settingsStore.settings.menu.isRounded,
               }"
-              :title="generateI18nTitle(item.meta?.i18n, item.meta?.title)"
+              :title="generateTitle(item.meta?.title)"
               @click="switchTo(index, item)"
             >
               <div class="flex flex-row flex-1 items-center justify-center px-8px">
@@ -124,7 +124,7 @@ onMounted(() => {
                   class="menu-item-container-icon transition-transform group-hover:scale-120 mr-5px"
                 />
                 <span class="w-full flex-1 truncate text-center text-sm transition-height transition-opacity transition-width">
-                  {{ generateI18nTitle(item.meta?.i18n, item.meta?.title) }}
+                  {{ generateTitle(item.meta?.title) }}
                 </span>
               </div>
             </div>

package/src/built-in/layout-component/components/Menu/item.vue

@@ -18,7 +18,7 @@ const props = withDefaults(
 );
 
 const rootMenu = inject(rootMenuInjectionKey)!;
-const { generateI18nTitle } = useContext();
+const { generateTitle } = useContext();
 
 const itemRef = ref<HTMLElement>();
 
@@ -78,7 +78,7 @@ defineExpose({
         'px-2!': rootMenu.isMenuPopup && level === 0,
         'py-3!': rootMenu.props.rounded && rootMenu.isMenuPopup && level !== 0,
       }"
-      :title="generateI18nTitle(item.meta?.i18n, item.meta?.title)"
+      :title="generateTitle(item.meta?.title)"
     >
       <div
         class="menu-item-container-layout inline-flex flex-1 items-center justify-center gap-[12px]"
@@ -106,7 +106,7 @@ defineExpose({
             'system-point': icon === 'system-point' && isItemActive,
           }"
         >
-          {{ generateI18nTitle(item.meta?.i18n, item.meta?.title) }}
+          {{ generateTitle(item.meta?.title) }}
         </span>
         <HBadge
           v-if="item.meta?.badge"

package/src/built-in/layout-component/components/Sidebar/MainSidebar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { PubinfoIcon } from '@/features/components';
 import { useContext } from '../../composables/useContext';
-import useMenu from '../../composables/useMenu';
+import { useMenu } from '../../composables/useMenu';
 import Logo from '../Logo/index.vue';
 import Menu from '../Menu/index.vue';
 
@@ -11,7 +11,7 @@ defineOptions({
 
 const route = useRoute();
 
-const { settingsStore, menuStore, generateI18nTitle } = useContext();
+const { settingsStore, menuStore, generateTitle } = useContext();
 const { switchTo } = useMenu();
 
 function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
@@ -50,7 +50,7 @@ function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
                 'text-[var(--g-main-sidebar-menu-active-color)]! bg-[var(--g-main-sidebar-menu-active-bg)]!': index === menuStore.actived,
                 'rounded-2': settingsStore.settings.menu.isRounded,
               }"
-              :title="generateI18nTitle(item.meta?.i18n, item.meta?.title)"
+              :title="generateTitle(item.meta?.title)"
               @click="switchTo(index, item)"
             >
               <div class="w-full inline-flex flex-1 flex-col items-center justify-center gap-[2px]">
@@ -62,7 +62,7 @@ function iconName(isActive: boolean, icon?: string, activeIcon?: string) {
                 />
                 <!-- 不需要title? -->
                 <!-- <span class="w-full flex-1 truncate text-center text-sm transition-height transition-opacity transition-width">
-                  {{ generateI18nTitle(item.meta?.i18n, item.meta?.title) }}
+                  {{ generateTitle(item.meta?.title) }}
                 </span> -->
               </div>
             </div>

package/src/built-in/layout-component/components/Sidebar/index.vue

@@ -3,7 +3,7 @@ import MainSidebar from './MainSidebar.vue';
 import SubSidebar from './SubSidebar.vue';
 
 defineOptions({
-  name: 'Sidebar',
+  name: 'LayoutSidebar',
 });
 </script>