@pubinfo/core 2.0.14 → 2.1.0

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useCssVar } from '@vueuse/core';
-import { useContext } from '../../composables/useContext';
+import { useLayoutVisible } from '../../composables/useLayoutVisible';
 import Tabbar from './Tabbar/index.vue';
 import Toolbar from './Toolbar/index.vue';
 
@@ -8,110 +7,10 @@ defineOptions({
   name: 'Topbar',
 });
 
-const { settingsStore, routeStore } = useContext();
-const route = useRoute();
-
-/**
- * 计算属性：是否开启工具栏
- *
- * @return {boolean}
- */
-const enableToolbar = computed(() => {
-  return !(
-    (
-      settingsStore.settings.menu.menuMode === 'head'
-      && !settingsStore.settings.menu.enableSubMenuCollapseButton
-      && !settingsStore.settings.favorites.enable
-      && !settingsStore.settings.breadcrumb.enable
-    ) || (
-      settingsStore.settings.menu.menuMode === 'only-head'
-      && !settingsStore.settings.favorites.enable
-      && !settingsStore.settings.breadcrumb.enable
-    )
-  );
-});
-
-// 统一在 Topbar 内控制是否渲染 Tabbar/Toolbar（结合全局设置与路由 meta）
-const showTabbar = computed(() => {
-  // 路由可通过 meta.layout.tabs 显隐，默认显示
-  const routeAllow = (routeStore.getRemoteAppRouteById(route)?.meta as any)?.layout?.tabs ?? true;
-  return settingsStore.settings.tabbar.enable && routeAllow;
-});
-
-const showToolbar = computed(() => {
-  // 路由可通过 meta.layout.toolbar 显隐，默认显示
-  const routeAllow = (routeStore.getRemoteAppRouteById(route)?.meta as any)?.layout?.toolbar ?? true;
-  return enableToolbar.value && routeAllow;
-});
-
-const scrollTop = ref(0);
-const scrollOnHide = ref(false);
-const globalTabbarHeight = useCssVar('--g-tabbar-height', document.documentElement || document.body);
-const globalToolBarHeight = useCssVar('--g-toolbar-height', document.documentElement || document.body);
-
-const topbarHeight = computed(() => {
-  const tabbarHeight = showTabbar.value
-    ? Number.parseInt(globalTabbarHeight.value!)
-    : 0;
-  const toolbarHeight = showToolbar.value
-    ? Number.parseInt(globalToolBarHeight.value!)
-    : 0;
-  return tabbarHeight + toolbarHeight;
-});
-onMounted(() => {
-  window.addEventListener('scroll', onScroll);
-});
-onUnmounted(() => {
-  window.removeEventListener('scroll', onScroll);
-});
-function onScroll() {
-  scrollTop.value = (document.documentElement || document.body).scrollTop;
-}
-watch(scrollTop, (val, oldVal) => {
-  scrollOnHide.value = settingsStore.settings.topbar.mode === 'sticky' && val > oldVal && val > topbarHeight.value;
-});
+const { show } = useLayoutVisible();
 </script>
 
 <template>
-  <div
-    class="topbar-container"
-    :class="{
-      'has-tabbar': showTabbar,
-      'has-toolbar': showToolbar,
-      [`topbar-${settingsStore.settings.topbar.mode}`]: true,
-      'shadow': !settingsStore.settings.topbar.switchTabbarAndToolbar && scrollTop,
-      'hide': scrollOnHide,
-      'switch-tabbar-toolbar': settingsStore.settings.topbar.switchTabbarAndToolbar,
-    }"
-    data-fixed-calc-width
-  >
-    <Tabbar v-if="showTabbar" />
-    <Toolbar v-if="showToolbar" />
-  </div>
+  <Tabbar v-if="show.tabbar" />
+  <Toolbar v-if="show.toolbar" />
 </template>
-
-<style scoped>
-.topbar-container {
-  --at-apply: absolute top-0 z-100 flex flex-col;
-  box-shadow: 0 1px 0 0 var(--g-border-color);
-  transition: width 0.3s, top 0.3s, transform 0.3s, box-shadow 0.3s;
-}
-
-.topbar-container.topbar-fixed,
-.topbar-container.topbar-sticky {
-  --at-apply: fixed;
-}
-
-.topbar-container.topbar-fixed.shadow,
-.topbar-container.topbar-sticky.shadow {
-  box-shadow: 0 10px 10px -10px var(--g-box-shadow-color);
-}
-
-.topbar-container.topbar-sticky.hide {
-  top: calc((var(--g-tabbar-height) + var(--g-toolbar-height)) * -1) !important;
-}
-
-.topbar-container.switch-tabbar-toolbar {
-  flex-direction: column-reverse;
-}
-</style>

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

@@ -0,0 +1,87 @@
+import type { RouterMetaRawBaseOptions } from '#/vue-router';
+import type { RequiredDeep } from 'type-fest';
+import type { LayoutProps } from '../interface';
+import { useContext } from './useContext';
+
+const visibleInjectionKey = Symbol.for('pubinfo.layout.visible') as InjectionKey<LayoutProps>;
+
+export function createLayoutVisible(props: LayoutProps) {
+  provide(visibleInjectionKey, props);
+}
+
+/**
+ * 判断布局组件内各个部分的展示
+ */
+export function useLayoutVisible(_props?: LayoutProps) {
+  const { routeStore, settingsStore, menuStore } = useContext();
+  const props = inject(visibleInjectionKey, _props);
+
+  const route = useRoute();
+
+  const show = computed(() => {
+    // 应用级 meta.layout 配置
+    const appMetaData: RequiredDeep<RouterMetaRawBaseOptions['layout']> = {
+      header: true,
+      sidebar: true,
+      tabs: true,
+      toolbar: true,
+      ...routeStore.getRemoteAppRouteById(route)?.meta?.layout,
+    };
+
+    // 侧边栏菜单的菜单数据
+    const sidebarMenus = menuStore.sidebarMenus;
+
+    // 菜单模式
+    const { menuMode, subMenuOnlyOneHide, enableSubMenuCollapseButton } = settingsStore.settings.menu;
+
+    const mode = settingsStore.mode;
+    const tabbarEnable = settingsStore.settings.tabbar.enable;
+    const favoritesEnable = settingsStore.settings.favorites.enable;
+    const breadcrumbEnable = settingsStore.settings.breadcrumb.enable;
+
+    return {
+      /** 顶部栏 */
+      header: mode === 'pc' && ['head', 'only-head'].includes(menuMode) && appMetaData.header && props?.showHeader,
+
+      /** 主侧边栏 */
+      mainSidebar: ((mode === 'mobile' && menuMode !== 'single') || ['side', 'only-side'].includes(menuMode)) && props?.showSidebar,
+
+      /** 副侧边栏 */
+      subSidebar: (
+        mode === 'mobile' || (
+          ['side', 'head', 'single'].includes(menuMode)
+          && sidebarMenus.length > 0
+          && !(
+            subMenuOnlyOneHide
+            && sidebarMenus.length === 1
+            && (
+              !sidebarMenus[0].children
+              || sidebarMenus[0]?.children.every(item => item.meta?.sidebar === false)
+            )
+          )
+        )
+      ) && appMetaData.sidebar && props?.showSidebar,
+
+      /** 标签栏 */
+      tabbar: tabbarEnable && appMetaData.tabs && props?.showTabbar,
+
+      /** 工具栏 */
+      toolbar: !(
+        (
+          menuMode === 'head'
+          && !enableSubMenuCollapseButton
+          && !favoritesEnable
+          && !breadcrumbEnable
+        ) || (
+          menuMode === 'only-head'
+          && !favoritesEnable
+          && !breadcrumbEnable
+        )
+      ) && appMetaData.toolbar && props?.showToolbar,
+    };
+  });
+
+  return {
+    show,
+  };
+}

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

@@ -0,0 +1,25 @@
+export interface LayoutProps {
+  /**
+   * 是否展示头部
+   * @default true
+   */
+  showHeader?: boolean
+
+  /**
+   * 是否展示侧边栏
+   * @default true
+   */
+  showSidebar?: boolean
+
+  /**
+   * 是否展示标签栏
+   * @default true
+   */
+  showTabbar?: boolean
+
+  /**
+   * 是否展示工具栏
+   * @default true
+   */
+  showToolbar?: boolean
+}

package/src/core/create.ts

@@ -1,5 +1,5 @@
 import type { Context, Options } from './interface';
-import { setupDevtoolsPanel } from '@pubinfo/devtools';
+
 import { createPinia } from 'pinia';
 import { createApp as createVueApp } from 'vue';
 import { createRouter, createWebHashHistory } from 'vue-router';
@@ -25,8 +25,6 @@ export function createApp(options: Options) {
     const store = createPinia();
     app.use(store);
 
-    setupDevtoolsPanel();
-
     const { base, ...restRouterOptions } = routerOptions;
     const router = createRouter({
       history: createWebHashHistory(base),

package/src/core/request.ts

@@ -37,7 +37,6 @@ export function createRequest(options: RequestOptions = {}) {
     responded: {
       onSuccess: async (response, method) => {
         let stopped = false;
-
         const res = await hooks.callHookWith(
           async (hookFns, args) => {
             let _response = args[0];

package/src/features/assets/styles/globals.css

@@ -33,7 +33,7 @@
 
 /* 明暗模式 CSS 变量 */
 :root {
-  color-scheme: light dark;
+  color-scheme: light;
   --g-box-shadow-color: rgba(0, 0, 0, 0.12);
 }
 
@@ -52,6 +52,7 @@
 }
 
 :root.dark {
+  color-scheme: dark;
   --g-box-shadow-color: rgba(0, 0, 0, 0.72);
 }
 

package/src/features/composables/log.ts

@@ -1,4 +1,4 @@
-import { consola } from 'consola';
+import { logger } from '@pubinfo/shared';
 
 enum LOG_TYPE {
   ERROR = 'error',
@@ -17,8 +17,6 @@ enum EMOJI {
   BOX = '🟧',
 }
 
-const createConsoleLog = consola.withTag('腾龙开发底座');
-
 function createLog(type: LOG_TYPE, emoji: EMOJI) {
   return (message: string | Error) => {
     if (!import.meta.env.DEV) {
@@ -27,11 +25,11 @@ function createLog(type: LOG_TYPE, emoji: EMOJI) {
 
     if (typeof message === 'string') {
       const msg = message.length > 0 ? `${emoji} ${message}` : '';
-      createConsoleLog[type](msg);
+      logger[type](msg);
     }
     else {
       const msg = message instanceof Error ? message : new Error(message);
-      createConsoleLog[type](msg);
+      logger[type](msg);
     }
   };
 }

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

@@ -22,14 +22,13 @@ const useKeepAliveStore = defineStore(
       if (isString(name)) {
         return !list.value.includes(name) && list.value.push(name);
       }
-      else if (isArray(name)) {
-        name.forEach((_name) => {
-          add(_name);
-        });
-      }
-      else {
-        useWarn(`KeepAlive 需要接受一个字符串或者字符串数组作为参数, 但是接受到了 ${typeof name} 类型`);
+
+      if (isArray(name)) {
+        name.forEach(_name => add(_name));
+        return;
       }
+
+      useWarn(`KeepAlive 需要接受一个字符串或者字符串数组作为参数, 但是接受到了 ${typeof name} 类型`);
     }
 
     /**
@@ -39,14 +38,11 @@ const useKeepAliveStore = defineStore(
      */
     function remove(name: string | string[]) {
       if (isString(name)) {
-        list.value = list.value.filter((v) => {
-          return v !== name;
-        });
+        list.value = list.value.filter(v => v !== name);
       }
-      else if (isArray(name)) {
-        list.value = list.value.filter((v) => {
-          return !name.includes(v);
-        });
+
+      if (isArray(name)) {
+        list.value = list.value.filter(v => !name.includes(v));
       }
     }
 

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

@@ -97,25 +97,32 @@ const useMenuStore = defineStore(
      * @returns {MenuData['children']} 当前活动菜单的子菜单，如果没有菜单则返回空数组。
      */
     const sidebarMenus = computed<MenuData['children']>(() => {
-      const tempAllMenus = allMenus.value.filter(item => !get(item, 'meta.isDev', false));
-      if (tempAllMenus.length > 0) {
-        if (tempAllMenus.length > 1) {
-          while (get(allMenus.value[actived.value], 'meta.isDev', false) && actived.value < allMenus.value.length - 1) {
-            actived.value++;
-          }
-          return allMenus.value[actived.value].children;
+      // 过滤 meta.isDev 为 true 的应用
+      const filteredAllMenus = allMenus.value.filter(item => !get(item, 'meta.isDev', false));
+
+      if (filteredAllMenus.length === 0) {
+        return [];
+      }
+
+      while (true) {
+        const menu = allMenus.value[actived.value];
+
+        if (actived.value >= allMenus.value.length - 1) {
+          break;
         }
-        else {
-          return get(allMenus.value[0], 'meta.isDev', false) ? [] : allMenus.value[0].children;
+
+        // 有子菜单且不为开发中的应用
+        if (menu.children.length > 0 && !get(menu, 'meta.isDev', false)) {
+          break;
         }
+
+        actived.value++;
       }
-      else {
-        return [];
-      }
+
+      return allMenus.value[actived.value].children ?? [];
     });
 
     /**
-     * TODO V1: 如果第一个菜单是一个isDev为true的菜单，那么这个计算属性可能会出现问题
      * 返回第一个侧边栏菜单的最深路径的计算属性。
      *
      * @returns {string} 第一个侧边栏菜单的最深路径，如果没有侧边栏菜单则返回'/'。

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

@@ -283,15 +283,15 @@ const useRouteStore = defineStore(
      */
     const routes = computed<RouteData[]>(() => {
       return needFilterRoutes.value
-        ? filterAsyncRoutes(routesRaw.value, userStore.user.permissions)
+        ? filterAsyncRoutes(routesRaw.value, userStore?.user?.permissions ?? [])
         : cloneDeep(routesRaw.value);
     });
 
     // 将设置 meta.singleMenu 的一级路由转换成二级路由
     function convertSingleRoutes<T extends RouteData[]>(routes: T) {
       routes.map((route) => {
-        // 在应用级配置 meta.layout
-        const Layout = setupDefaultLayout(route?.meta?.layout);
+        // 在应用级配置 meta.layoutComponent
+        const Layout = setupDefaultLayout(route?.meta?.layoutComponent);
 
         if (route.children && route.children.length > 0) {
           route.children.forEach((item, index, arr) => {

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

@@ -1,6 +1,6 @@
 import type { RouteLocationNormalized, RouteMeta } from 'vue-router';
 import { FrownOutlined } from '@ant-design/icons-vue';
-import { usePreferredDark } from '@vueuse/core';
+import { usePreferredDark, useToggle } from '@vueuse/core';
 import { Modal } from 'ant-design-vue';
 import { cloneDeep, defaultsDeep, get, isArray, isEmpty, isObject, reduce, set } from 'lodash-es';
 import { defineStore } from 'pinia';
@@ -243,13 +243,8 @@ const useSettingsStore = defineStore(
       settings.value.app.colorScheme = color;
     }
 
-    // 主页面是否最大化
-    const mainPageMaximizeStatus = ref(false);
-
     // 切换当前主页面最大化
-    function setMainPageMaximize(value?: boolean) {
-      mainPageMaximizeStatus.value = value ?? !mainPageMaximizeStatus.value;
-    }
+    const [mainPageMaximizeStatus, setMainPageMaximize] = useToggle(false);
 
     /**
      * 更新配置

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

@@ -2,7 +2,7 @@ import type { AxiosRequestHeaders } from 'axios';
 import type { ComputedRef } from 'vue';
 import { find } from 'lodash-es';
 import { defineStore } from 'pinia';
-import { postAuthChangeLoginOrg, postAuthLogin } from '@/features/api/modules/auth';
+import { postAuthChangeLoginOrg, postAuthLogin, postAuthLoginNew } from '@/features/api/modules/auth';
 import { getRbacResourceGrantedResources, getRbacUserUserEntireInfo, putRbacUserChangePassword } from '@/features/api/modules/rbac';
 import { usePubinfoContext } from '@/features/context';
 import { publicKeyEncryption } from '@/utils';
@@ -24,7 +24,10 @@ export interface UserStore {
   /** 获取用户权限码 */
   getPermissions: () => Promise<string[]>
 
-  /** 登录 */
+  /**
+   * 登录
+   * @deprecated 请使用 `signIn` 方法替代
+   */
   login: (data: {
     account: string
     password: string
@@ -33,6 +36,16 @@ export interface UserStore {
     loginType?: 'password' | string
   }) => Promise<API.ResponseDataLoginTokenVo>
 
+  /** 登录 */
+  signIn: (data: {
+    account: string
+    password: string
+    captchas: string
+    captchaHash: string
+    loginType?: 'password' | string
+    captchaType?: string
+  }) => Promise<API.ResponseDataLoginTokenVo>
+
   /** 登出 */
   logout: () => void
 
@@ -96,6 +109,7 @@ const useUserStore = defineStore<STORE_NAME.USER, UserStore>(
 
     /**
      * 用户登录函数
+     * @deprecated 请使用 `signIn` 方法替代
      * @param data 登录所需的数据
      * @param data.account 账号
      * @param data.password 密码
@@ -130,6 +144,46 @@ const useUserStore = defineStore<STORE_NAME.USER, UserStore>(
       return result;
     }
 
+    /**
+     * 用户登录函数
+     * @param data 登录所需的数据
+     * @param data.account 账号
+     * @param data.password 密码
+     * @param data.captchas 验证码
+     * @param data.captchaHash 验证码哈希值
+     * @param data.loginType 登录类型，默认为 'password'
+     * @param data.captchaType 验证类型
+     */
+    async function signIn(data: {
+      account: string
+      password: string
+      captchas: string
+      captchaHash: string
+      loginType?: 'password' | string
+      captchaType?: string
+    }) {
+      const {
+        account: loginName,
+        password,
+        captchaHash: codeHash,
+        captchas: code,
+        loginType = 'password',
+        captchaType,
+      } = data;
+      const loginPwd = await publicKeyEncryption(password);
+      const result = await postAuthLoginNew({
+        loginType,
+        loginName,
+        loginPwd,
+        codeHash,
+        code,
+        captchaType,
+      });
+      const { accessToken, refreshToken } = result.data as Required<API.LoginTokenVo>;
+      setToken(accessToken, refreshToken);
+      return result;
+    }
+
     /**
      * 执行用户注销操作，并跳转到登录页面。
      */
@@ -231,6 +285,7 @@ const useUserStore = defineStore<STORE_NAME.USER, UserStore>(
       getUserInfo,
       getPermissions,
       login,
+      signIn,
       logout,
       changePassword,
       changeOrg,

package/src/index.ts

@@ -2,6 +2,7 @@ import type { Options, RequestInstance } from './core';
 import {
   Authentication,
   Authorization,
+  Devtools,
   LayoutComponent,
   NProgress,
   PiniaPlugin,
@@ -57,6 +58,7 @@ export function createPubinfo(options: PubinfoOptions) {
     modules: [
       {
         name: 'built-in:context',
+        enforce: 'pre',
         setup(ctx) {
           createPubinfoContext({
             router: ctx.router,
@@ -74,6 +76,7 @@ export function createPubinfo(options: PubinfoOptions) {
       NProgress(),
       SystemInfo(),
       ...(options.modules ?? []),
+      Devtools(),
     ],
   });
 }

package/types/vue-router.d.ts

@@ -29,7 +29,14 @@ export interface RouterMetaRawBaseOptions {
   pin?: boolean
   routeName?: string
   id?: string | number
+  layout?: {
+    header?: boolean
+    sidebar?: boolean
+    tabs?: boolean
+    toolbar?: boolean
+  }
   partyLogin?: PartyLoginStepConfig[]
+  custom?: any
 }
 
 type RouterMetaRaw = RequireExactlyOne<Partial<RouterMetaRawBaseOptions>, 'title'>;
@@ -48,12 +55,12 @@ export declare namespace Route {
   type recordMainRawBasicMeta = Partial<Pick<RouterMetaRawBaseOptions, mainMeta>>;
 
   interface recordMainRawNotDev {
-    meta: Merge<recordMainRawBasicMeta, { isDev?: false, layout?: string }>
+    meta: Merge<recordMainRawBasicMeta, { isDev?: false, layoutComponent?: string }>
     children: RouteRecordRaw[]
   }
 
   interface recordMainRawDev {
-    meta: Merge<recordMainRawBasicMeta, { isDev: true, layout?: string }>
+    meta: Merge<recordMainRawBasicMeta, { isDev: true, layoutComponent?: string }>
     children?: RouteRecordRaw[]
   }
 

package/dist/HeaderThinMenu-B6cpu5jx.js

@@ -1,4 +0,0 @@
-import { cE as f } from "./index-BN5BYOEh.js";
-export {
-  f as default
-};

package/dist/index-iASxH_cj.js

@@ -1,4 +0,0 @@
-import { cD as f } from "./index-BN5BYOEh.js";
-export {
-  f as default
-};