@pubinfo/core 2.0.0-beta.9 → 2.0.0-rc.1

package/src/{route/guard/auth.ts → built-in/authorization/router.ts}

@@ -1,23 +1,44 @@
-import type { Router } from 'vue-router';
+import type { Router, RouteRecordRaw } from 'vue-router';
 import {
   useFavoritesStore,
   useRouteStore,
   useSettingsStore,
   useTabbarStore,
   useUserStore,
-} from '@/stores';
+} from '@/features/stores';
+import { cleanup } from '@/utils';
+
+const NotPermissionRoute: RouteRecordRaw = {
+  path: '/not-permission',
+  name: 'NotPermission',
+  component: () => import('./pages/not-permission/index.vue'),
+  meta: {
+    whiteList: true,
+    title: '无权限访问',
+  },
+};
 
 /** 权限路由守卫 */
-export function createAuthGuard(router: Router) {
+export function setupRouterGuard(router: Router) {
   const userStore = useUserStore();
   const routeStore = useRouteStore();
   const settingsStore = useSettingsStore();
   const tabbarStore = useTabbarStore();
   const favoritesStore = useFavoritesStore();
 
+  let isRouteAdded = false;
+
   router.beforeEach(async (to, from) => {
     const isAuthenticated = userStore.isLogin;
 
+    if (!isRouteAdded) {
+      if (!router.hasRoute(NotPermissionRoute.name!)) {
+        router.addRoute(NotPermissionRoute);
+      }
+      isRouteAdded = true;
+      return { ...to, replace: true };
+    }
+
     // 是否已登录
     if (!isAuthenticated) {
       // 白名单路由直接进入
@@ -33,23 +54,32 @@ export function createAuthGuard(router: Router) {
 
     // 是否已根据权限动态生成并注册路由
     if (!routeStore.isGenerate) {
-      await Promise.allSettled([
-        // 获取用户组织列表
-        userStore.getUserInfo(),
+      const res = await Promise.allSettled([
         // 获取用户偏好设置
         settingsStore.settings.app.enableSettingPreferences && settingsStore.getPreferencesAll(),
+        // 获取用户组织列表
+        userStore.getUserInfo(),
       ]);
 
-      await Promise.allSettled([
+      if (res.some(e => e.status === 'rejected')) {
+        cleanup();
+        return { name: 'Login' };
+      }
+
+      const res2 = await Promise.allSettled([
         // 复原固定标签页
         (tabbarStore as any).recoveryStorage(),
         // 复原收藏夹
         (favoritesStore as any).recoveryStorage(),
         // 生成动态路由
-        settingsStore.settings.app.routeBaseOn === 'frontend' && routeStore.generateRoutesAtFront(),
-        settingsStore.settings.app.routeBaseOn === 'backend' && routeStore.generateRoutesAtBack(),
+        routeStore.generateRoutes(),
       ]);
 
+      if (res2.some(e => e.status === 'rejected')) {
+        cleanup();
+        return { name: 'Login' };
+      }
+
       // 注册并记录路由数据
       // 记录的数据会在登出时会使用到，不使用 router.removeRoute 是考虑配置的路由可能不一定有设置 name
       // 则通过调用 router.addRoute() 返回的回调进行删除

package/src/built-in/index.ts

@@ -0,0 +1,8 @@
+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';
+export * from './settings';

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

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import RiLogoutBoxLine from '~icons/ri/logout-box-line';
+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 { useContext } from './composables/useContext';
+import { useGetSidebarActualWidth } from './composables/useGetComputedStyle';
+import { useHotkey } from './composables/useHotkey';
+import useWatermark from './composables/useWatermark';
+
+defineOptions({
+  name: 'Layout',
+});
+
+const routeInfo = useRoute();
+const { settingsStore, menuStore } = useContext();
+const { mainSidebarActualWidth, subSidebarActualWidth } = useGetSidebarActualWidth();
+
+useHotkey({
+  settingsStore,
+  menuStore,
+});
+
+useWatermark();
+
+watch(() => settingsStore.settings.menu.subMenuCollapse, (val) => {
+  if (settingsStore.mode === 'mobile') {
+    if (!val) {
+      document.body.classList.add('overflow-hidden');
+    }
+    else {
+      document.body.classList.remove('overflow-hidden');
+    }
+  }
+});
+
+watch(() => routeInfo.path, () => {
+  if (settingsStore.mode === 'mobile') {
+    settingsStore.$patch((state) => {
+      state.settings.menu.subMenuCollapse = true;
+    });
+  }
+});
+</script>
+
+<template>
+  <div
+    class="layout"
+    :style="{
+      '--g-main-sidebar-actual-width': mainSidebarActualWidth,
+      '--g-sub-sidebar-actual-width': subSidebarActualWidth,
+    }"
+  >
+    <div id="app-main" :class="{ 'main-page-maximize': settingsStore.mainPageMaximizeStatus }">
+      <slot name="header">
+        <LayoutHeader />
+      </slot>
+
+      <div class="wrapper">
+        <div
+          class="sidebar-container"
+          :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.settings.menu.subMenuCollapse }"
+        >
+          <!-- TODO 这种写法会导致侧边栏模式的布局下，有样式问题 -->
+          <!-- <slot name="sidebar">
+              <Sidebar />
+            </slot> -->
+
+          <MainSidebar />
+          <SubSidebar />
+        </div>
+
+        <div
+          class="sidebar-mask"
+          :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.settings.menu.subMenuCollapse }"
+          @click="settingsStore.toggleSidebarCollapse()"
+        />
+
+        <div class="main-container" :style="{ 'padding-bottom': routeInfo.meta.paddingBottom }">
+          <slot name="topbar">
+            <Topbar />
+          </slot>
+
+          <div class="main">
+            <div
+              v-show="settingsStore.mainPageMaximizeStatus"
+              class="exit-main-page-maximize"
+              @click="settingsStore.setMainPageMaximize()"
+            >
+              <RiLogoutBoxLine />
+            </div>
+
+            <slot>
+              <LayoutContent />
+            </slot>
+          </div>
+
+          <slot name="footer">
+            <Copyright />
+          </slot>
+        </div>
+      </div>
+    </div>
+
+    <SettingBar />
+    <BackTop />
+  </div>
+</template>
+
+<style scoped>
+[data-app-width-mode="adaption"] #app-main {
+  --at-apply: w-full;
+}
+
+[data-app-width-mode="adaption-min-width"] #app-main {
+  width: max(var(--g-app-width), 100%);
+}
+
+[data-app-width-mode="center"] #app-main {
+  --at-apply: w-[--g-app-width];
+}
+
+[data-app-width-mode="center-max-width"] #app-main {
+  width: min(var(--g-app-width), 100%);
+}
+
+[data-mode="mobile"] #app-main {
+  --at-apply: w-full;
+}
+
+[data-mode="mobile"] .sidebar-container {
+  transform: translateX(calc((var(--g-main-sidebar-width) + var(--g-sub-sidebar-width)) * -1));
+}
+
+[data-mode="mobile"] .sidebar-container.show {
+  transform: translateX(0);
+}
+
+[data-mode="mobile"] .main-container {
+  margin-left: 0 !important;
+}
+
+[data-mode="mobile"][data-menu-mode="single"] .sidebar-container {
+  transform: translateX(calc(var(--g-sub-sidebar-width) * -1));
+}
+
+[data-mode="mobile"][data-menu-mode="single"] .sidebar-container.show {
+  transform: translateX(0);
+}
+
+.layout {
+  --at-apply: h-full;
+}
+
+#app-main {
+  --at-apply: h-full bg-[--g-bg] mx-auto my-0;
+}
+
+#app-main.main-page-maximize header,
+#app-main.main-page-maximize .sidebar-container {
+  --at-apply: hidden;
+}
+
+#app-main.main-page-maximize .wrapper {
+  --at-apply: pt-0;
+}
+
+#app-main.main-page-maximize .wrapper .main-container {
+  --at-apply: ml-0;
+}
+
+#app-main.main-page-maximize .wrapper .main-container .topbar-container {
+  --at-apply: hidden;
+}
+
+#app-main.main-page-maximize .wrapper .main-container .main {
+  --at-apply: m-0;
+}
+
+#app-main.main-page-maximize :deep([data-fixed-calc-width]) {
+  --at-apply: w-full -translate-x-2/4;
+}
+
+.wrapper {
+  --at-apply: relative w-full h-full;
+  transition: padding-top 0.3s;
+}
+
+.wrapper .sidebar-container {
+  --at-apply: fixed top-0 bottom-0 z-501 flex;
+  width: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
+  box-shadow: -1px 0 0 0 var(--g-border-color), 1px 0 0 0 var(--g-border-color);
+  transition: width 0.3s, transform 0.3s, box-shadow 0.3s, top 0.3s;
+}
+
+.wrapper .sidebar-mask {
+  --at-apply: fixed z-[500] w-full h-full invisible opacity-0 left-0 top-0;
+
+  background-size: 4px 4px;
+  backdrop-filter: saturate(50%) blur(4px);
+  transition: all 0.2s;
+  background-image: radial-gradient(transparent 1px, rgb(0 0 0 / 30%) 1px);
+}
+
+.wrapper .sidebar-mask.show {
+  --at-apply: visible op-100;
+}
+
+.wrapper .main-sidebar-container:not(.main-sidebar-leave-active) + .sub-sidebar-container {
+  --at-apply: left-[--g-main-sidebar-width];
+}
+
+.wrapper .main-container {
+  --at-apply: flex flex-col h-0 min-h-full;
+  margin-left: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
+  box-shadow: -1px 0 0 0 var(--g-border-color), 1px 0 0 0 var(--g-border-color);
+  transition: margin-left 0.3s, background-color 0.3s, box-shadow 0.3s;
+}
+
+.wrapper .main-container .main {
+  --at-apply: relative flex-[auto] basis-0 h-0;
+  transition: 0.3s;
+}
+
+.wrapper .main-container .main .exit-main-page-maximize {
+  --at-apply: bg-stone-7 dark:bg-stone-3 text-stone-3 dark:text-stone-7
+  op-50 hover:op-100 transition-opacity fixed z-[1000] w-20 h-20 cursor-pointer
+  rounded-[50%] -right-10 -top-10;
+}
+
+.wrapper .main-container .main .exit-main-page-maximize svg {
+  --at-apply: absolute bottom-4 left-4;
+}
+
+.wrapper .main-container .topbar-container.has-tabbar + .main {
+  margin: var(--g-tabbar-height) 0 0;
+}
+
+.wrapper .main-container .topbar-container.has-toolbar + .main {
+  margin: var(--g-toolbar-height) 0 0;
+}
+
+.wrapper .main-container .topbar-container.has-tabbar.has-toolbar + .main {
+  margin: calc(var(--g-tabbar-height) + var(--g-toolbar-height)) 0 0;
+}
+
+header:not(.header-leave-active) + .wrapper {
+  --at-apply: pt-[--g-header-height];
+}
+
+header:not(.header-leave-active) + .wrapper .sidebar-container {
+  --at-apply: top-[--g-header-height];
+}
+
+header:not(.header-leave-active) + .wrapper .sidebar-container :deep(.sidebar-logo) {
+  --at-apply: hidden;
+}
+
+header:not(.header-leave-active) + .wrapper .main-container .topbar-container {
+  --at-apply: top-[--g-header-height];
+}
+
+header:not(.header-leave-active) + .wrapper .main-container .topbar-container :deep(.tools) {
+  --at-apply: hidden;
+}
+</style>

package/src/{layout → built-in/layout-component}/components/Content/IframeView.vue

@@ -52,8 +52,7 @@ watch(() => route.fullPath, (val) => {
   </div>
 </template>
 
-<style lang="scss" scoped>
-// iframe区动画
+<style scoped>
 .fade-enter-active,
 .slide-left-enter-active,
 .slide-right-enter-active,

package/src/{layout → built-in/layout-component}/components/Content/LinkView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { PageMain } from '@/components';
 import { useClipboard } from '@vueuse/core';
 import Message from 'vue-m-message';
 import IconParkTwotonePlanet from '~icons/icon-park-twotone/planet';
 import RiExternalLinkFill from '~icons/ri/external-link-fill';
+import { PageMain } from '@/features/components';
 import { useContext } from '../../composables/useContext';
 
 defineOptions({
@@ -51,7 +51,7 @@ function open() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .fade-enter-active,
 .slide-left-enter-active,
 .slide-right-enter-active,

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

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { useContext } from '../../composables/useContext';
+import IframeView from './IframeView.vue';
+import LinkView from './LinkView.vue';
+
+defineOptions({
+  name: 'LayoutContent',
+});
+
+const _route = useRoute();
+const { settingsStore, keepAliveStore } = useContext();
+
+const isIframe = computed(() => !!_route.meta.iframe);
+const isLink = computed(() => !!_route.meta.link);
+
+function EmptyWrapper(_: any, { slots }: { slots: any }) {
+  return slots?.default?.();
+}
+
+const Provider = computed(() => {
+  const metaProvider = _route.matched?.[0]?.meta?.provider;
+
+  if (!metaProvider) {
+    return EmptyWrapper;
+  };
+
+  // 是函数，认为是 () => import(...)
+  if (typeof metaProvider === 'function') {
+    return defineAsyncComponent(metaProvider);
+  }
+
+  return metaProvider;
+});
+
+const shouldCache = computed(() => !!_route.meta?.cache);
+
+// 监听路由变化，根据 meta.cache 管理缓存
+watch(
+  () => _route.name,
+  (newName, oldName) => {
+    if (newName && _route.meta?.cache) {
+      keepAliveStore.add(String(newName));
+    }
+  },
+  { immediate: true },
+);
+
+// 监听路由的 meta.cache 变化
+watch(
+  () => _route.meta?.cache,
+  (shouldCache, wasCached) => {
+    if (_route.name) {
+      if (shouldCache) {
+        keepAliveStore.add(String(_route.name));
+      }
+      else {
+        keepAliveStore.remove(String(_route.name));
+      }
+    }
+  },
+);
+</script>
+
+<template>
+  <RouterView v-slot="{ Component, route }">
+    <component :is="Provider">
+      <Transition
+        :name="settingsStore.settings.mainPage.enableTransition ? settingsStore.settings.mainPage.transitionMode : ''"
+        mode="out-in" appear
+      >
+        <KeepAlive :include="keepAliveStore.list">
+          <component :is="Component" v-show="!(isIframe || isLink)" :key="route.fullPath" class="page-container" />
+        </KeepAlive>
+      </Transition>
+    </component>
+  </RouterView>
+
+  <IframeView v-show="isIframe && !isLink" />
+  <LinkView v-if="isLink" />
+</template>
+
+<style scoped>
+.fade-enter-active,
+.slide-left-enter-active,
+.slide-right-enter-active,
+.slide-top-enter-active,
+.slide-bottom-enter-active {
+  transition: 0.2s;
+}
+
+.fade-leave-active,
+.slide-left-leave-active,
+.slide-right-leave-active,
+.slide-top-leave-active,
+.slide-bottom-leave-active {
+  transition: 0.15s;
+}
+
+.fade-enter-from {
+  opacity: 0;
+}
+
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-left-enter-from {
+  margin-left: 20px;
+  opacity: 0;
+}
+
+.slide-left-leave-to {
+  margin-left: -20px;
+  opacity: 0;
+}
+
+.slide-right-enter-from {
+  margin-left: -20px;
+  opacity: 0;
+}
+
+.slide-right-leave-to {
+  margin-left: 20px;
+  opacity: 0;
+}
+
+.slide-top-enter-from {
+  margin-top: 20px;
+  opacity: 0;
+}
+
+.slide-top-leave-to {
+  margin-top: -20px;
+  opacity: 0;
+}
+
+.slide-bottom-enter-from {
+  margin-top: -20px;
+  opacity: 0;
+}
+
+.slide-bottom-leave-to {
+  margin-top: 20px;
+  opacity: 0;
+}
+</style>

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

@@ -33,17 +33,16 @@ const { settingsStore } = useContext();
   </footer>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .copyright {
   --at-apply: flex items-center justify-center flex-wrap my-4 px-4 text-sm text-stone-5;
+}
 
-  span,
-  a {
-    --at-apply: px-1;
-  }
+.copyright span,a {
+  --at-apply: px-1;
+}
 
-  a {
-    --at-apply: text-center no-underline text-stone-5 hover:text-dark dark:hover:text-light transition;
-  }
+.copyright a {
+  --at-apply: text-center no-underline text-stone-5 hover:text-dark dark:hover:text-light transition;
 }
 </style>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Menu } from '#/menu';
-import { PubinfoIcon } from '@/components';
+import { PubinfoIcon } from '@/features/components';
 import NotCursor from './NotCursor.vue';
 
 defineOptions({
@@ -35,7 +35,7 @@ function menuClick(index: number, item: Menu.recordMainRaw) {
     <template #popper>
       <div class="menu-more-container" box-border>
         <template v-for="(item, index) in items" :key="index">
-          <NotCursor :is-cursor="item.meta?.isDev" :skidding="150">
+          <NotCursor :is-cursor="item.meta?.isDev" :dev-text="item.meta?.devText" :skidding="150">
             <div
               cursor-pointer flex="~  items-center" box-border p-15px w-full h-40px rounded-8px text-sm mb-10px
               :class="{
@@ -54,50 +54,42 @@ function menuClick(index: number, item: Menu.recordMainRaw) {
   </VMenu>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .menu-more-container {
-  min-width: 180px;
-  padding: 10px;
-  padding-bottom: 0;
+  --at-apply: min-w-180px p-10px pb-0;
+}
 
-  .is-dev {
-    cursor: not-allowed;
+.menu-more-container .is-dev {
+  --at-apply: cursor-not-allowed;
+}
 
-    i {
-      filter: grayscale(100%);
-    }
+.menu-more-container .is-dev i {
+  filter: grayscale(100%);
+}
 
-    span {
-      opacity: 0.8;
-    }
-  }
+.menu-more-container .is-dev span {
+  opacity: 0.8;
 }
 </style>
 
-<style lang="scss">
+<style>
 .v-popper--theme-more-appley {
+  --at-apply: z-1000;
   z-index: 1000;
+}
 
-  .v-popper__inner {
-    background-image: linear-gradient(-43deg, #fff 0%, #eaf3ff 87%);
-    border: 1px solid #fff;
-    border-radius: 8px;
-    box-shadow: 8px 16px 28px -8px #8195b74f;
-  }
+.v-popper--theme-more-appley .v-popper__inner {
+  --at-apply: border border-white border-solid rounded-8px;
+  background-image: linear-gradient(-43deg, #fff 0%, #eaf3ff 87%);
+  box-shadow: 8px 16px 28px -8px #8195b74f;
+}
 
-  .v-popper__arrow-container {
-    display: none;
-  }
+.v-popper--theme-more-appley .v-popper__arrow-container {
+  --at-apply: hidden;
 }
 
-.dark {
-  .v-popper--theme-more-appley {
-    .v-popper__inner {
-      background-image: linear-gradient(-43deg, #141414  0%, #141414 87%);
-      border: 1px solid #4b4f53;
-      border-radius: 8px;
-      box-shadow: none;
-    }
-  }
+.dark .v-popper--theme-more-appley .v-popper__inner {
+  --at-apply: border border-#4b4f53 border-solid rounded-8px shadow-[none];
+  background-image: linear-gradient(-43deg, #141414 0%, #141414 87%);
 }
 </style>