@pubinfo/core 2.0.4 → 2.0.6

package/dist/utils/index.d.ts

@@ -2,5 +2,6 @@ export * from './cleanup';
 export * from './global';
 export * from './path';
 export * from './proxy';
+export * from './publicKey';
 export * from './storage';
 export { createContext as createRawContext } from 'unctx';

package/dist/utils/publicKey.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 使用 `publicKey` 进行加密
+ */
+export declare function publicKeyEncryption(content: string): Promise<string>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pubinfo/core",
   "type": "module",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -26,8 +26,8 @@
     "pinia": "^3.0.3",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1",
-    "@pubinfo/config": "2.0.4",
-    "@pubinfo/vite": "2.0.4"
+    "@pubinfo/config": "2.0.6",
+    "@pubinfo/vite": "2.0.6"
   },
   "dependencies": {
     "@alova/adapter-axios": "^2.0.16",
@@ -85,8 +85,8 @@
     "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1",
-    "@pubinfo/config": "2.0.4",
-    "@pubinfo/vite": "2.0.4"
+    "@pubinfo/config": "2.0.6",
+    "@pubinfo/vite": "2.0.6"
   },
   "scripts": {
     "dev": "vite build -w -m watch",

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

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import RiLogoutBoxLine from '~icons/ri/logout-box-line';
+import { useAuth } from '@/features/composables';
 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 NotAllowed from './components/NotAllowed/index.vue';
 import SettingBar from './components/SettingBar/index.vue';
 import LayoutSidebar from './components/Sidebar/index.vue';
-import LayoutTopbar from './components/Topbar/index.vue';
 
+import LayoutTopbar from './components/Topbar/index.vue';
 import { useContext } from './composables/useContext';
 import { useGetSidebarActualWidth } from './composables/useGetComputedStyle';
 import { useHotkey } from './composables/useHotkey';
@@ -18,6 +20,12 @@ defineOptions({
 });
 
 const routeInfo = useRoute();
+const { auth } = useAuth();
+
+const isAuth = computed(() => {
+  return routeInfo.matched.every(item => auth(item.meta.auth ?? ''));
+});
+
 const { settingsStore } = useContext();
 const { mainSidebarActualWidth, subSidebarActualWidth } = useGetSidebarActualWidth();
 useHotkey();
@@ -86,9 +94,13 @@ watch(() => routeInfo.path, () => {
               <RiLogoutBoxLine />
             </div>
 
-            <slot>
+            <slot v-if="isAuth">
               <LayoutContent />
             </slot>
+
+            <slot v-else name="notAllowed">
+              <NotAllowed />
+            </slot>
           </div>
 
           <slot name="footer">

package/src/built-in/layout-component/components/Header/{TopMode → HeaderFullMenu}/index.vue

@@ -9,7 +9,7 @@ import More from './More.vue';
 import NotCursor from './NotCursor.vue';
 
 defineOptions({
-  name: 'TopMode',
+  name: 'LayoutHeaderFullMenu',
 });
 
 const { settingsStore, menuStore, generateTitle } = useContext();

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useContext } from '../../composables/useContext';
+
+defineOptions({
+  name: 'LayoutHeaderMenu',
+});
+
+const HeaderFullMenu = defineAsyncComponent(() => import('./HeaderFullMenu/index.vue'));
+const HeaderThinMenu = defineAsyncComponent(() => import('./HeaderThinMenu.vue'));
+
+const { settingsStore } = useContext();
+</script>
+
+<template>
+  <!-- 顶部模式 -->
+  <HeaderFullMenu v-if="settingsStore.settings.menu.menuMode === 'head'" />
+  <!-- 顶部精简模式 -->
+  <HeaderThinMenu v-else-if="settingsStore.settings.menu.menuMode === 'only-head'" />
+</template>

package/src/built-in/layout-component/components/Header/{TopThinMode.vue → HeaderThinMenu.vue}

@@ -5,7 +5,7 @@ import Menu from '../Menu/index.vue';
 =               Vue SFC Options 配置           =
 ============================================= */
 defineOptions({
-  name: 'TopThinMode',
+  name: 'LayoutHeaderThinMenu',
 });
 /* =============================================
 =                   逻辑代码                   =

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

@@ -2,14 +2,12 @@
 import { useContext } from '../../composables/useContext';
 import Logo from '../Logo/index.vue';
 import Tools from '../Tools/index.vue';
+import HeaderMenu from './HeaderMenu.vue';
 
 defineOptions({
   name: 'LayoutHeader',
 });
 
-const TopMode = defineAsyncComponent(() => import('./TopMode/index.vue'));
-const TopThinMode = defineAsyncComponent(() => import('./TopThinMode.vue'));
-
 const { settingsStore } = useContext();
 </script>
 
@@ -23,10 +21,7 @@ const { settingsStore } = useContext();
           </slot>
 
           <slot name="menu">
-            <!-- 顶部模式 -->
-            <TopMode v-if="settingsStore.settings.menu.menuMode === 'head'" />
-            <!-- 顶部精简模式 -->
-            <TopThinMode v-else-if="settingsStore.settings.menu.menuMode === 'only-head'" />
+            <HeaderMenu />
           </slot>
         </div>
 

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

@@ -33,7 +33,7 @@ const isMenuPopup = computed<MenuInjection['isMenuPopup']>(() => {
 });
 
 // 解析传入的 menu 数据，并保存到 items 和 subMenus 对象中
-function initItems(menu: MenuProps['menu'], parentPaths: string[] = []) {
+function initItems(menu: MenuProps['menu'] = [], parentPaths: string[] = []) {
   menu.forEach((item) => {
     const index = item.path ?? JSON.stringify(item);
     if (item.children && item.children.length > 0) {

package/src/{features → built-in/layout-component}/components/NotAllowed/index.vue

@@ -6,40 +6,15 @@ defineOptions({
 });
 
 const route = useRoute();
-const router = useRouter();
 
 const settingsStore = useSettingsStore();
 const tabbarStore = useTabbarStore();
 
-const data = ref({
-  inter: Number.NaN,
-  countdown: 5,
-});
-
-onUnmounted(() => {
-  if (data.value.inter) {
-    window.clearInterval(data.value.inter);
-  }
-});
-
 onMounted(() => {
   if (settingsStore.settings.tabbar.enable) {
     tabbarStore.remove(route.meta.activeMenu || route.fullPath);
   }
-  data.value.inter = window.setInterval(() => {
-    data.value.countdown--;
-    if (data.value.countdown === 0) {
-      if (data.value.inter) {
-        window.clearInterval(data.value.inter);
-      }
-      goBack();
-    }
-  }, 1000);
 });
-
-function goBack() {
-  router.push('/');
-}
 </script>
 
 <template>
@@ -52,23 +27,18 @@ function goBack() {
       <div class="desc mx-0 text-xl text-stone-5 dark:text-[#C9D6EF]">
         抱歉，你无权访问该页面
       </div>
-      <div>
-        <HButton @click="goBack">
-          {{ data.countdown }} 秒后，返回首页
-        </HButton>
-      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
 .noPermissionIcon {
-  background: url("./assets/403.svg") no-repeat;
+  background: url("../../assets/images/403.svg") no-repeat;
   background-size: 100% 100%;
 }
 
 [data-theme="dark"] .noPermissionIcon {
-  background: url("./assets/403_dark.svg") no-repeat;
+  background: url("../../assets/images/403_dark.svg") no-repeat;
   background-size: 100% 100%;
 }
 </style>

package/src/built-in/layout-component/composables/useGetComputedStyle.ts

@@ -7,10 +7,10 @@ import { useContext } from './useContext';
  * @returns 样式属性值的整数形式
  */
 export function useGetComputedStyle(property: string, root: HTMLElement = document.documentElement) {
-  return Number.parseInt(getComputedStyle(root).getPropertyValue(property));
+  return getComputedStyle(root).getPropertyValue(property).trim();
 }
 
-type unit = `${string}px`;
+type unit = string;
 
 /**
  * 根据各种设置和条件计算主侧边栏和子侧边栏的实际宽度。
@@ -28,7 +28,7 @@ export function useGetSidebarActualWidth() {
       return '0px';
     }
     else {
-      return `${useGetComputedStyle('--g-main-sidebar-width')}px`;
+      return useGetComputedStyle('--g-main-sidebar-width');
     }
   });
 
@@ -39,18 +39,18 @@ export function useGetSidebarActualWidth() {
    */
   const subSidebarActualWidth = computed<unit>(() => {
     let actualWidth = useGetComputedStyle('--g-sub-sidebar-width');
-    const subSidebarActualWidth = settingsStore.settings.menu.subMenuCollapse;
+    const _subSidebarActualWidth = settingsStore.settings.menu.subMenuCollapse;
     const subMenuOnlyOneHide = settingsStore.settings.menu.subMenuOnlyOneHide;
     const menuMode = settingsStore.settings.menu.menuMode;
     const isMobile = settingsStore.mode !== 'mobile';
     const onlySideOrHead = ['only-side', 'only-head'].includes(menuMode);
 
-    if (subSidebarActualWidth && isMobile) {
+    if (_subSidebarActualWidth && isMobile) {
       actualWidth = useGetComputedStyle('--g-sub-sidebar-collapse-width');
     }
 
     if (onlySideOrHead && isMobile) {
-      actualWidth = 0;
+      actualWidth = '0px';
     }
     if (
       subMenuOnlyOneHide
@@ -60,10 +60,13 @@ export function useGetSidebarActualWidth() {
         || menuStore.sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
       )
     ) {
-      actualWidth = 0;
+      actualWidth = '0px';
     }
-    return `${actualWidth}px`;
+    return actualWidth;
   });
 
-  return { mainSidebarActualWidth, subSidebarActualWidth };
+  return {
+    mainSidebarActualWidth,
+    subSidebarActualWidth,
+  };
 }

package/src/built-in/layout-component/index.ts

@@ -6,12 +6,18 @@ import { defineSystemRoutes } from '@/features';
 import { Provider as LayoutProvider } from './provider';
 import Layout from './Layout.vue';
 import LayoutContent from './components/Content/index.vue';
+
 import LayoutHeader from './components/Header/index.vue';
+import LayoutHeaderMenu from './components/Header/HeaderMenu.vue';
+import LayoutHeaderFullMenu from './components/Header/HeaderFullMenu/index.vue';
+import LayoutHeaderThinMenu from './components/Header/HeaderThinMenu.vue';
+
 import LayoutSidebar from './components/Sidebar/index.vue';
 import LayoutTopbar from './components/Topbar/index.vue';
 
 import Logo from './components/Logo/index.vue';
 import Tools from './components/Tools/index.vue';
+import NotAllowed from './components/NotAllowed/index.vue';
 import Fullscreen from './components/Tools/Fullscreen.vue';
 import PageReload from './components/Tools/PageReload.vue';
 import DarkModeToggle from './components/Tools/DarkModeToggle.vue';
@@ -71,6 +77,10 @@ export const Tool = {
 
 Layout.Provider = LayoutProvider;
 Layout.Header = LayoutHeader;
+Layout.HeaderMenu = LayoutHeaderMenu;
+Layout.HeaderFullMenu = LayoutHeaderFullMenu;
+Layout.HeaderThinMenu = LayoutHeaderThinMenu;
+Layout.Header = LayoutHeader;
 Layout.Content = LayoutContent;
 Layout.Sidebar = LayoutSidebar;
 Layout.Topbar = LayoutTopbar;
@@ -79,12 +89,17 @@ export {
   LayoutProvider,
   Layout,
   LayoutContent,
+
   LayoutHeader,
+  LayoutHeaderMenu,
+  LayoutHeaderFullMenu,
+  LayoutHeaderThinMenu,
+
   LayoutSidebar,
   LayoutTopbar,
 
   Logo,
   Tools,
-
+  NotAllowed,
   Copyright,
 };

package/src/features/components/PubinfoApp/index.vue

@@ -1,22 +1,9 @@
 <script setup lang="ts">
-import { useAuth } from '@/features/composables';
-import NotAllowed from '../NotAllowed/index.vue';
-
 defineOptions({
   name: 'PubinfoApp',
 });
-
-const route = useRoute();
-const { auth } = useAuth();
-
-const isAuth = computed(() => {
-  return route.matched.every(item => auth(item.meta.auth ?? ''));
-});
 </script>
 
 <template>
-  <RouterView v-slot="{ Component }">
-    <component :is="Component" v-if="isAuth" />
-    <NotAllowed v-else />
-  </RouterView>
+  <RouterView />
 </template>

package/src/features/components/index.ts

@@ -1,4 +1,3 @@
-export { default as NotAllowed } from './NotAllowed/index.vue';
 export { default as PageHeader } from './PageHeader/index.vue';
 export { default as PageMain } from './PageMain/index.vue';
 export { default as PassStrengthValidator } from './PassStrengthValidator/index.vue';

package/src/features/settings/index.ts

@@ -36,6 +36,7 @@ let globalSettings: RequiredDeep<Settings.all> = {
     subMenuCollapse: false,
     enableSubMenuCollapseButton: true,
     enableHotkeys: false,
+    showWithoutPermission: false,
   },
   topbar: {
     mode: 'fixed',

package/src/features/stores/modules/menu.ts

@@ -45,7 +45,7 @@ const useMenuStore = defineStore(
      * //   { path: '/app/about', title: 'About' },
      * // ]
      */
-    function convertToFullPath(menu: any[], path: string = '') {
+    function convertToFullPath(menu: any[] = [], path: string = '') {
       return menu.map((item) => {
         item.path = resolveRoutePath(path, item.path);
         if (item.children) {
@@ -174,7 +174,7 @@ const useMenuStore = defineStore(
      * @param rootPath 根路径
      * @returns 默认展开的路径数组
      */
-    function getDefaultOpenedPaths(menus: Menu.recordRaw[], rootPath = '') {
+    function getDefaultOpenedPaths(menus: Menu.recordRaw[] = [], rootPath = '') {
       const defaultOpenedPaths: string[] = [];
       menus.forEach((item) => {
         if (item.meta?.defaultOpened && item.children) {

package/src/features/stores/modules/route.ts

@@ -33,6 +33,12 @@ const useRouteStore = defineStore(
       system?: boolean
     }>>([]);
 
+    /** 如果权限功能开启 / 不展示无权限菜单，则需要对路由数据进行筛选过滤 */
+    const needFilterRoutes = computed(() => {
+      const { app, menu } = settingsStore.settings;
+      return app.enablePermission && !menu.showWithoutPermission;
+    });
+
     /**
      * 创建面包屑对象
      * @param currentRouter 当前路由对象
@@ -273,8 +279,7 @@ const useRouteStore = defineStore(
      */
     const routes = computed(() => {
       let returnRoutes: Route.recordMainRaw[];
-      // 如果权限功能开启，则需要对路由数据进行筛选过滤
-      if (settingsStore.settings.app.enablePermission) {
+      if (needFilterRoutes.value) {
         returnRoutes = filterAsyncRoutes(routesRaw.value, userStore.user.permissions);
       }
       else {
@@ -351,7 +356,7 @@ const useRouteStore = defineStore(
      * 生成路由
      */
     async function generateRoutes() {
-      const res = await postRbacResourceMineOrAllResourceTree({ needAll: false });
+      const res = await postRbacResourceMineOrAllResourceTree({ needAll: !needFilterRoutes.value });
       if (res.success) {
         remoteRoutesRaw.value = res?.data ?? [];
         const staticRoutes = convertSingleRoutes(filterEnabledRoutes(cloneDeep(asyncRoutes)));

package/src/features/stores/modules/user.ts

@@ -5,8 +5,8 @@ import { defineStore } from 'pinia';
 import { postAuthChangeLoginOrg, postAuthLogin } from '@/features/api/modules/auth';
 import { getRbacResourceGrantedResources, getRbacUserUserEntireInfo, putRbacUserChangePassword } from '@/features/api/modules/rbac';
 import { usePubinfoContext } from '@/features/context';
+import { publicKeyEncryption } from '@/utils';
 import { STORE_NAME } from '../enum';
-import { getEncryptedData } from '../utils';
 
 export interface UserStore {
   /** 用户信息 */
@@ -117,7 +117,7 @@ const useUserStore = defineStore<STORE_NAME.USER, UserStore>(
         captchas: code,
         loginType = 'password',
       } = data;
-      const loginPwd = await getEncryptedData(password);
+      const loginPwd = await publicKeyEncryption(password);
       const result = await postAuthLogin({
         loginType,
         loginName,
@@ -179,8 +179,8 @@ const useUserStore = defineStore<STORE_NAME.USER, UserStore>(
       if (form.token) {
         headers.authorization = form.token;
       }
-      const encryptedOldpassword = await getEncryptedData(form.oldPassword);
-      const encryptedNewpassword = await getEncryptedData(form.newPassword);
+      const encryptedOldpassword = await publicKeyEncryption(form.oldPassword);
+      const encryptedNewpassword = await publicKeyEncryption(form.newPassword);
       const res = await putRbacUserChangePassword({
         oldPassword: encryptedOldpassword,
         newPassword: encryptedNewpassword,

package/src/features/stores/utils/index.ts

@@ -1,2 +1 @@
-export * from './crypto';
 export * from './routerHelper';

package/src/index.ts

@@ -88,6 +88,7 @@ export {
   LayoutSidebar,
   LayoutTopbar,
   Logo,
+  NotAllowed,
   Tool,
   Tools,
 } from './built-in/layout-component';
@@ -114,6 +115,7 @@ export {
   createRawContext,
   getPersistedState,
   getPubinfoNamespace,
+  publicKeyEncryption,
   setPersistedState,
   storage,
   wrapProxy,

package/src/utils/index.ts

@@ -2,5 +2,6 @@ export * from './cleanup';
 export * from './global';
 export * from './path';
 export * from './proxy';
+export * from './publicKey';
 export * from './storage';
 export { createContext as createRawContext } from 'unctx';

package/src/{features/stores/utils/crypto.ts → utils/publicKey.ts}

@@ -7,18 +7,17 @@ function compilePublicKey(key: string) {
   return compiled({ publickKey: key });
 }
 
-async function getPem() {
-  const { data } = await getAuthLoginKey();
-  return compilePublicKey(data!);
+async function getPublicKey() {
+  const res = await getAuthLoginKey();
+  return compilePublicKey(res.data ?? '');
 }
 
-async function encryptWithPublicKey(publicKey: string, data: string) {
+/**
+ * 使用 `publicKey` 进行加密
+ */
+export async function publicKeyEncryption(content: string) {
+  const publicKey = await getPublicKey();
   const encryptor = new JSEncrypt();
   encryptor.setPublicKey(publicKey);
-  return encryptor.encrypt(data) as string;
-}
-
-export async function getEncryptedData(str: string) {
-  const key = await getPem();
-  return await encryptWithPublicKey(key, str);
+  return encryptor.encrypt(content) as string;
 }

package/types/settings.d.ts

@@ -220,6 +220,12 @@ declare namespace Settings {
      */
     enableHotkeys?: boolean
 
+    /**
+     * 是否展示无权限的菜单
+     *
+     * @默认值 `false`
+     */
+    showWithoutPermission?: boolean
   }
 
   /* ================== TOPBAR ================= */

package/dist/TopThinMode-CgPi1Z9s.js

@@ -1,35 +0,0 @@
-import { defineComponent as a, ref as l, createElementBlock as m, openBlock as i, withModifiers as c, createVNode as d, normalizeClass as f, unref as e } from "vue";
-import { bL as p, bT as _ } from "./index-lqO17ZtF.js";
-import { useRoute as h } from "vue-router";
-const y = /* @__PURE__ */ a({
-  name: "TopThinMode",
-  __name: "TopThinMode",
-  setup(v) {
-    const o = h(), { settingsStore: n, menuStore: u } = p(), s = l();
-    function r(t) {
-      s.value.scrollBy({
-        left: (t.deltaY || t.detail) > 0 ? 50 : -50
-      });
-    }
-    return (t, M) => (i(), m("div", {
-      ref_key: "menuRef",
-      ref: s,
-      class: "menu-container",
-      onWheel: c(r, ["prevent"])
-    }, [
-      d(_, {
-        menu: e(u).allMenus,
-        value: e(o).meta.activeMenu || e(o).path,
-        mode: "horizontal",
-        "show-collapse-name": "",
-        rounded: e(n).settings.menu.isRounded,
-        class: f(["menu", {
-          [`menu-active-${e(n).settings.menu.menuActiveStyle}`]: e(n).settings.menu.menuActiveStyle !== ""
-        }])
-      }, null, 8, ["menu", "value", "rounded", "class"])
-    ], 544));
-  }
-});
-export {
-  y as default
-};

package/dist/features/stores/utils/crypto.d.ts

@@ -1 +0,0 @@
-export declare function getEncryptedData(str: string): Promise<string>;