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

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

@@ -0,0 +1,57 @@
+import type { Router, RouteRecordRaw } from 'vue-router';
+import { isUndefined } from 'lodash-es';
+import { useUserStore } from '@/features';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/change-password/:changePassWordToken',
+    name: 'ChangePassword',
+    component: () => import('./pages/change-password/index.vue'),
+    // 特殊处理changelog-password路由，不允许直接访问
+    // 其实应该移入到鉴权组路由,但是会导致需要频繁挂载销毁路由
+    beforeEnter: (to) => {
+      if (isUndefined(to.params.changePassWordToken)) {
+        return { name: 'Login' };
+      }
+      return true;
+    },
+    meta: {
+      whiteList: true,
+      title: '修改密码',
+    },
+  },
+  {
+    path: '/change-organization/:orgId',
+    name: 'ChangeOrganization',
+    component: () => import('./pages/change-organization/index.vue'),
+    beforeEnter: (to) => {
+      const userStore = useUserStore();
+      if (isUndefined(to.params.orgId) || to.params.orgId !== userStore.user.orgId) {
+        return { name: 'Login' };
+      }
+      return true;
+    },
+    meta: {
+      whiteList: true,
+      title: '切换组织',
+    },
+  },
+];
+
+export function createRouterGuard(router: Router) {
+  let isRouteAdded = false;
+
+  router.beforeEach((to) => {
+    if (!isRouteAdded) {
+      routes.forEach((route) => {
+        if (!router.hasRoute(route.name!)) {
+          router.addRoute(route);
+        }
+      });
+
+      isRouteAdded = true;
+
+      return { ...to, replace: true };
+    }
+  });
+}

package/src/{directives/plugins/permission.ts → built-in/authorization/directives.ts}

@@ -1,13 +1,11 @@
 import type { App } from 'vue';
+import { useAuth } from '@/features/composables';
 
-/**
- * 设置权限指令
- * @param app 应用程序实例
- */
-export function setupPermissionDirective(app: App) {
+export function setupDirectives(app: App) {
   app.directive('auth', {
     mounted: (el, binding) => {
-      if (!useAuth().auth(binding.value)) {
+      const { auth } = useAuth();
+      if (!auth(binding.value)) {
         el.remove();
       }
     },
@@ -15,7 +13,8 @@ export function setupPermissionDirective(app: App) {
 
   app.directive('auth-all', {
     mounted: (el, binding) => {
-      if (!useAuth().authAll(binding.value)) {
+      const { authAll } = useAuth();
+      if (!authAll(binding.value)) {
         el.remove();
       }
     },

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

@@ -0,0 +1,11 @@
+import type { RequestMethod } from '@/core';
+import { useSettingsStore } from '@/features/stores';
+
+/**
+ * 数据权限标识
+ * @param method 请求方法
+ */
+export function maybeSetAuthData(method: RequestMethod) {
+  const settingsStore = useSettingsStore();
+  method.config.headers['X-ResourceMark'] = method.config.headers['X-ResourceMark'] || settingsStore.auth;
+}

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

@@ -0,0 +1,25 @@
+import type { ModuleOptions } from '@/core';
+import { setupDirectives } from './directives';
+import { maybeSetAuthData } from './helper';
+import { setupRouterGuard } from './router';
+
+/**
+ * 权限授权 (资源级拦截)
+ *
+ * 用户是否有访问某个页面/按钮的权限
+ */
+export function Authorization(): ModuleOptions {
+  return {
+    name: 'built-in:authorization',
+    setup(ctx) {
+      const { app, router } = ctx;
+      setupDirectives(app);
+      setupRouterGuard(router);
+    },
+    hooks: {
+      'http:request': (method) => {
+        maybeSetAuthData(method);
+      },
+    },
+  };
+}

package/src/built-in/authorization/pages/not-permission/403.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 383 309" preserveAspectRatio="xMidYMid meet"><rect width="118.274" height="17.809" fill="#81ACFA" rx="4" transform="matrix(1 0 .08716 .9962 161.633 272.588)"/><rect width="118.274" height="17.809" fill="url(#a)" rx="4" transform="matrix(1 0 .08716 .9962 162.633 269.588)"/><path fill="url(#b)" d="m32.505 148.18 36.78 85.112c25.18 58.267 91.725 89.125 148.315 68.777l85.675-30.806c91.652-32.954 86.59-163.719-7.961-205.65L172.859 11.307C80.133-29.813-7.488 55.635 32.505 148.18"/><rect width="68.502" height="88.093" fill="url(#c)" rx="2" transform="matrix(1 0 .08716 .9962 180.84 189.236)"/><rect width="68.502" height="77.252" fill="url(#d)" rx="2" transform="matrix(1 0 .08716 .9962 180.84 189.236)"/><rect width="137.89" height="105.817" fill="url(#e)" rx="10" transform="matrix(1 0 .08716 .9962 .076 169.044)"/><g opacity=".3"><path fill="#B0C6F8" fill-rule="evenodd" d="M32.416 185.888a1 1 0 0 0-1 1v4.978a1 1 0 0 0 1 1H65.98a1 1 0 0 0 1-1v-4.978a1 1 0 0 0-1-1zm39.964 0a.9.9 0 0 0-.913.996l.434 4.959c.048.551.535.997 1.087.997h11.475a.9.9 0 0 0 .913-.997l-.434-4.959a1.11 1.11 0 0 0-1.087-.996zm-38.814 13.156a.9.9 0 0 0-.912.996l.433 4.959c.049.55.535.996 1.088.996h33.564a.9.9 0 0 0 .913-.996l-.434-4.959a1.11 1.11 0 0 0-1.087-.996zm39.965 0a.9.9 0 0 0-.913.996l.434 4.959c.048.55.535.996 1.087.996h11.475a.9.9 0 0 0 .912-.996l-.433-4.959a1.11 1.11 0 0 0-1.088-.996z" clip-rule="evenodd"/><path fill="#CEDCFF" fill-rule="evenodd" d="M34.717 212.2a.9.9 0 0 0-.913.996l.434 4.959c.048.55.535.996 1.087.996H68.89a.9.9 0 0 0 .913-.996l-.434-4.959a1.11 1.11 0 0 0-1.087-.996zm39.964 0a.9.9 0 0 0-.913.996l.434 4.959c.049.55.535.996 1.088.996h11.474a.9.9 0 0 0 .913-.996l-.434-4.959a1.11 1.11 0 0 0-1.087-.996z" clip-rule="evenodd"/><path fill="#1CCDB8" d="M52.416 238.875c.698-1.125 2.373-1.125 3.268 0l15.628 19.634c1.05 1.319.262 3.141-1.36 3.141h-27.82c-1.622 0-2.728-1.822-1.909-3.141z"/><path fill="#1CCDB8" d="M75.608 246.101c.699-1.124 2.373-1.124 3.268 0l9.876 12.408c1.05 1.319.263 3.141-1.359 3.141h-17.58c-1.622 0-2.73-1.822-1.91-3.141z"/><circle cx="3.072" cy="3.072" r="3.072" fill="#1CCDB8" transform="matrix(1 0 .08716 .9962 76.041 232.35)"/></g><path fill="#0D4CAC" fill-opacity=".1" fill-rule="evenodd" d="M145.514 268.054H92.96c-6.628 0-12.655-5.332-13.463-11.91l-10.694-87.1h50.164c5.523 0 10.779 4.443 11.74 9.924l14.93 85.166c.244 1.392.188 2.718-.123 3.92" clip-rule="evenodd"/><rect width="238.238" height="173.566" fill="#81ACFA" rx="12" transform="matrix(1 0 .08716 .9962 84.719 85.475)"/><rect width="237.238" height="172.566" x=".544" y=".498" fill="url(#f)" stroke="url(#g)" rx="11.5" transform="matrix(1 0 .08716 .9962 86.675 83.477)"/><path fill="url(#h)" stroke="url(#i)" d="M101.526 88.354h209.477c5.247 0 9.871 4.237 10.328 9.464l10.845 123.958a1.35 1.35 0 0 1-1.369 1.495H105.33a1.666 1.666 0 0 1-1.631-1.495L92.854 97.818c-.457-5.227 3.425-9.464 8.672-9.464Z"/><path fill="#1346CB" fill-rule="evenodd" d="M101.481 87.856c-5.522 0-9.22 4.443-8.26 9.924l.757 4.315c.822-3.673 3.978-6.27 8.201-6.27h210.54c4.595 0 9.005 3.075 10.91 7.265l-.93-5.31c-.961-5.481-6.217-9.924-11.74-9.924z" clip-rule="evenodd"/><rect width="108" height="108" fill="#0D4CAC" fill-opacity=".18" rx="54" transform="matrix(1 0 .08716 .9962 246.5 74.57)"/><rect width="107" height="107" x=".544" y=".498" fill="url(#j)" stroke="#fff" rx="53.5" transform="matrix(1 0 .08716 .9962 264.88 56.617)"/><path fill="#CDDCEF" fill-rule="evenodd" d="M332.098 96.246c0 7.312-5.994 13.26-13.362 13.26-7.367 0-13.361-5.948-13.361-13.26s5.994-13.26 13.361-13.26 13.362 5.948 13.362 13.26m-29.466 46.337c-5.999-3.171-9.589-7.472-9.982-11.957-.194-2.221.403-4.42 1.757-6.471s3.437-3.916 6.133-5.486c2.696-1.571 5.95-2.816 9.577-3.666s7.556-1.287 11.562-1.287c4.007 0 8.012.437 11.788 1.287s7.248 2.095 10.219 3.666 5.38 3.434 7.093 5.486 2.694 4.25 2.888 6.471c.393 4.485-2.445 8.786-7.889 11.957s-13.048 4.953-21.14 4.953c-8.091 0-16.007-1.782-22.006-4.953" clip-rule="evenodd"/><path fill="#6599FF" fill-rule="evenodd" d="M337.098 90.246c0 7.312-5.994 13.26-13.362 13.26-7.367 0-13.361-5.948-13.361-13.26s5.994-13.26 13.361-13.26 13.362 5.948 13.362 13.26m-29.466 46.337c-5.999-3.171-9.589-7.472-9.982-11.957-.194-2.221.403-4.42 1.757-6.471s3.437-3.916 6.133-5.486c2.696-1.571 5.95-2.816 9.577-3.666s7.556-1.287 11.562-1.287c4.007 0 8.012.437 11.788 1.287s7.248 2.095 10.219 3.666 5.38 3.434 7.093 5.486 2.694 4.25 2.888 6.471c.393 4.485-2.445 8.786-7.889 11.957s-13.048 4.953-21.14 4.953c-8.091 0-16.007-1.782-22.006-4.953" clip-rule="evenodd"/><path fill="#1346CB" fill-opacity=".2" fill-rule="evenodd" d="m161.055 128.365 28.66 8.821c1.076.33 1.878 1.301 1.956 2.4l3.072 35.11v.003c-.04.279-.863 6.036-6.064 11.611-4.631 4.974-16.473 11.605-19.042 12.915l-1.302.678c-.343.183-.986.192-1.361 0l-1.421-.678a10 10 0 0 0-.462-.22 27 27 0 0 1-.957-.458c-4.799-2.399-15.802-7.932-20.564-12.237-6.146-5.556-7.984-11.293-8.085-11.608l-.002-.006-3.072-35.11c-.105-1.099.518-2.07 1.537-2.4zm6.113 66.088.019.009s.009 0 .026-.009zm.377-20.389h4.505c1.471 0 2.562-1.191 2.435-2.657h-.009l-.01-.109c-.128-1.466-1.428-2.657-2.899-2.657h-4.505l-.408-4.662c3.88-1.054 6.341-4.873 6.115-8.922.004-.064-.002-.128-.007-.192q.002-.054-.007-.102l-.007-.054c-.206-1.823-.911-3.682-2.108-5.175a11.26 11.26 0 0 0-5.118-3.636c-3.605-1.273-7.862-.11-9.983 2.757-1.225 1.658-1.835 3.518-1.832 5.651.007 1.869.697 3.866 1.811 5.46 1.072 1.529 2.596 2.876 4.308 3.627.506.219 1.009.393 1.509.54q.002.033.001.067l.002.08 1.427 16.304c.128 1.466 1.427 2.656 2.898 2.656s2.563-1.19 2.434-2.656zm-.834-16.882a1 1 0 0 0-.056.092 4 4 0 0 1-.341.41 2 2 0 0 1-.305.303 2 2 0 0 0-.276.201 8 8 0 0 1-.604.348c-.321.119-.661.22-1.005.284a7 7 0 0 1-1.076 0 9 9 0 0 1-1.054-.284 8 8 0 0 1-.792-.43 1 1 0 0 0-.098-.064 7 7 0 0 1-.446-.376 4 4 0 0 1-.27-.258l-.071-.072a3 3 0 0 0-.228-.293 9 9 0 0 1-.405-.632 7 7 0 0 1-.375-1.026 7 7 0 0 1-.093-1.072c.043-.348.105-.686.195-1.025q.16-.388.367-.751a1 1 0 0 0 .056-.092c.107-.147.224-.284.341-.412.072-.086.155-.167.237-.246l.067-.065c.165-.11.251-.174.276-.201q.294-.189.604-.349a6.4 6.4 0 0 1 1.005-.284 7 7 0 0 1 1.076 0c.356.074.704.166 1.054.284q.406.194.792.431c.011.009.05.037.098.064q.236.182.446.376c.094.079.183.169.27.258l.071.071c.126.175.198.266.228.294q.216.308.405.632c.149.339.281.687.375 1.035.034.173.06.356.075.531l.009.255.009.276a7 7 0 0 1-.194 1.035q-.16.389-.367.752" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="m166.536 122.143 28.659 8.82c1.077.33 1.879 1.302 1.957 2.401l3.072 35.109-.001.003c-.04.279-.862 6.036-6.063 11.611-4.631 4.974-16.473 11.606-19.043 12.915l-1.302.678c-.342.183-.985.192-1.361 0l-1.42-.678c-.138-.071-.282-.137-.463-.22a29 29 0 0 1-.957-.457c-4.798-2.4-15.802-7.933-20.564-12.238-6.145-5.556-7.983-11.293-8.084-11.608l-.002-.006-3.072-35.109c-.105-1.099.518-2.071 1.537-2.401zm6.112 66.087.02.009s.009 0 .026-.009zm.377-20.389h4.506c1.471 0 2.562-1.191 2.434-2.657h-.009l-.01-.109c-.128-1.466-1.427-2.657-2.898-2.657h-4.506l-.408-4.662c3.881-1.054 6.341-4.873 6.116-8.922a1 1 0 0 0-.008-.192.4.4 0 0 0-.007-.102q-.004-.025-.006-.054c-.206-1.822-.911-3.682-2.109-5.175a11.26 11.26 0 0 0-5.118-3.636c-3.605-1.273-7.861-.11-9.983 2.757-1.225 1.658-1.835 3.518-1.832 5.652.007 1.868.697 3.865 1.811 5.459 1.072 1.529 2.597 2.876 4.308 3.627.506.219 1.009.394 1.509.54q.002.033.002.067l.002.08 1.426 16.304c.128 1.466 1.428 2.656 2.899 2.656s2.562-1.19 2.434-2.656zm-.833-16.882a.5.5 0 0 0-.056.092 4 4 0 0 1-.342.41 2.2 2.2 0 0 1-.304.303c-.166.11-.251.174-.277.201-.2.129-.393.239-.604.348-.32.119-.661.22-1.005.284a7 7 0 0 1-1.076 0 9 9 0 0 1-1.054-.284 8 8 0 0 1-.791-.43 1 1 0 0 0-.098-.064 6 6 0 0 1-.447-.376 4 4 0 0 1-.27-.258l-.071-.072a3 3 0 0 0-.228-.293 9 9 0 0 1-.404-.632 7 7 0 0 1-.375-1.026 7 7 0 0 1-.094-1.071c.043-.349.106-.687.195-1.026a7 7 0 0 1 .367-.751.5.5 0 0 0 .056-.092q.164-.22.341-.412c.072-.086.156-.167.238-.246l.066-.065c.166-.11.251-.174.277-.201q.293-.188.604-.348c.32-.119.661-.22 1.005-.284a7 7 0 0 1 1.076 0c.355.073.703.165 1.054.284q.407.193.791.43c.011.009.05.037.098.064q.237.182.447.376c.093.079.182.169.27.258l.071.072c.125.174.197.265.228.293q.215.308.404.632c.149.339.281.687.376 1.035.034.173.059.356.074.531l.009.255.01.276a7 7 0 0 1-.195 1.035q-.16.389-.366.752" clip-rule="evenodd"/><path fill="#1346CB" fill-opacity=".2" fill-rule="evenodd" d="M249.143 139.557h-37.678l.357 4.085H249.5zm1.139 13.022h-37.678l.358 4.085h37.677zm-36.539 13.022h37.678l.358 4.085h-37.678zm38.817 13.021h-37.677l.357 4.086h37.678z" clip-rule="evenodd"/><path fill="#B6CFFF" fill-rule="evenodd" d="M252.143 135.557h-37.678l.357 4.085H252.5zm1.139 13.022h-37.678l.358 4.085h37.677zm-36.539 13.022h37.678l.358 4.085h-37.678zm38.817 13.021h-37.677l.357 4.086h37.678z" clip-rule="evenodd"/><defs><linearGradient id="a" x1="59.137" x2="59.137" y1="0" y2="17.809" gradientUnits="userSpaceOnUse"><stop stop-color="#EBF3FF"/><stop offset="1" stop-color="#D4E4FF"/></linearGradient><linearGradient id="b" x1="228.313" x2="228.313" y1="-98.142" y2="338.976" gradientUnits="userSpaceOnUse"><stop stop-color="#E5EFFF"/><stop offset="1" stop-color="#F2F7FF" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="1.411" x2="66.523" y1="88.093" y2="99.442" gradientUnits="userSpaceOnUse"><stop stop-color="#3E71E2"/><stop offset="1" stop-color="#4A82E8"/></linearGradient><linearGradient id="d" x1="1.411" x2="65.952" y1="77.252" y2="90.081" gradientUnits="userSpaceOnUse"><stop stop-color="#1846AE"/><stop offset="1" stop-color="#1350BF"/></linearGradient><linearGradient id="e" x1="68.945" x2="68.945" y1="0" y2="105.817" gradientUnits="userSpaceOnUse"><stop stop-color="#E7F0FF"/><stop offset="1" stop-color="#F4F8FF"/></linearGradient><linearGradient id="f" x1="119.119" x2="119.119" y1="0" y2="173.566" gradientUnits="userSpaceOnUse"><stop stop-color="#EBF3FF"/><stop offset="1" stop-color="#D4E4FF"/></linearGradient><linearGradient id="g" x1="119.119" x2="119.119" y1="0" y2="173.566" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="h" x1="206.221" x2="206.221" y1="87.856" y2="223.769" gradientUnits="userSpaceOnUse"><stop stop-color="#3D70F7"/><stop offset="1" stop-color="#7CAEFF"/></linearGradient><linearGradient id="i" x1="206.221" x2="206.221" y1="87.856" y2="223.769" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="j" x1="54" x2="54" y1="0" y2="108" gradientUnits="userSpaceOnUse"><stop stop-color="#E7F0FF"/><stop offset="1" stop-color="#F4F8FF"/></linearGradient></defs></svg>

package/src/built-in/authorization/pages/not-permission/403_dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="design-iconfont" viewBox="0 0 383 309" width="24" height="24" preserveAspectRatio="xMidYMid meet"><path fill="url(#a)" d="m32.505 148.18 36.78 85.112c25.18 58.267 91.725 89.125 148.315 68.777l85.675-30.806c91.652-32.954 86.59-163.719-7.961-205.65L172.859 11.307C80.133-29.813-7.488 55.635 32.505 148.18"/><rect width="118.274" height="17.809" fill="#81ACFA" rx="4" transform="matrix(1 0 .08716 .9962 161.633 272.588)"/><rect width="118.274" height="17.809" fill="#3A4E7A" rx="4" transform="matrix(1 0 .08716 .9962 161.633 272.588)"/><rect width="118.274" height="17.809" fill="url(#b)" rx="4" transform="matrix(1 0 .08716 .9962 162.633 269.588)"/><rect width="118.274" height="17.809" fill="url(#c)" rx="4" transform="matrix(1 0 .08716 .9962 162.633 269.588)"/><rect width="68.502" height="88.093" fill="url(#d)" rx="2" transform="matrix(1 0 .08716 .9962 180.84 189.236)"/><rect width="68.502" height="77.252" fill="#051539" rx="2" transform="matrix(1 0 .08716 .9962 180.84 189.236)"/><rect width="137.89" height="105.817" fill="url(#e)" rx="10" transform="matrix(1 0 .08716 .9962 .076 169.044)"/><rect width="137.89" height="105.817" fill="url(#f)" rx="10" transform="matrix(1 0 .08716 .9962 .076 169.044)"/><g opacity=".3"><path fill="#B0C6F8" fill-rule="evenodd" d="M32.416 185.888a1 1 0 0 0-1 1v4.978a1 1 0 0 0 1 1H65.98a1 1 0 0 0 1-1v-4.978a1 1 0 0 0-1-1zm39.964 0a.9.9 0 0 0-.913.996l.434 4.959c.048.551.535.997 1.087.997h11.475a.9.9 0 0 0 .913-.997l-.434-4.959a1.11 1.11 0 0 0-1.087-.996zm-38.814 13.156a.9.9 0 0 0-.912.996l.433 4.959c.049.55.535.996 1.088.996h33.564a.9.9 0 0 0 .913-.996l-.434-4.959a1.11 1.11 0 0 0-1.087-.996zm39.965 0a.9.9 0 0 0-.913.996l.434 4.959c.048.55.535.996 1.087.996h11.475a.9.9 0 0 0 .912-.996l-.433-4.959a1.11 1.11 0 0 0-1.088-.996z" clip-rule="evenodd"/><path fill="#CEDCFF" fill-rule="evenodd" d="M34.717 212.2a.9.9 0 0 0-.913.996l.434 4.959c.048.55.535.996 1.087.996H68.89a.9.9 0 0 0 .913-.996l-.434-4.959a1.11 1.11 0 0 0-1.087-.996zm39.964 0a.9.9 0 0 0-.913.996l.434 4.959c.049.55.535.996 1.088.996h11.474a.9.9 0 0 0 .913-.996l-.434-4.959a1.11 1.11 0 0 0-1.087-.996z" clip-rule="evenodd"/><path fill="#1CCDB8" d="M52.416 238.875c.698-1.125 2.373-1.125 3.268 0l15.628 19.634c1.05 1.319.262 3.141-1.36 3.141h-27.82c-1.622 0-2.728-1.822-1.909-3.141z"/><path fill="#1CCDB8" d="M75.608 246.101c.699-1.124 2.373-1.124 3.268 0l9.876 12.408c1.05 1.319.263 3.141-1.359 3.141h-17.58c-1.622 0-2.73-1.822-1.91-3.141zm3.505-13.751a3.203 2.935 42.502 1 0 .535 6.12 3.203 2.935 42.502 1 0-.535-6.12"/></g><path fill="#000F25" fill-opacity=".1" fill-rule="evenodd" d="M145.514 268.054H92.96c-6.628 0-12.655-5.332-13.463-11.91l-10.694-87.1h50.164c5.523 0 10.779 4.443 11.74 9.924l14.93 85.166c.244 1.392.188 2.718-.123 3.92" clip-rule="evenodd"/><rect width="238.238" height="173.566" fill="#81ACFA" rx="12" transform="matrix(1 0 .08716 .9962 84.719 85.475)"/><rect width="238.238" height="173.566" fill="#3A4E7A" rx="12" transform="matrix(1 0 .08716 .9962 84.719 85.475)"/><rect width="237.238" height="172.566" x=".544" y=".498" fill="url(#g)" stroke="url(#h)" rx="11.5" transform="matrix(1 0 .08716 .9962 86.675 83.477)"/><path fill="url(#i)" stroke="url(#j)" d="M101.526 88.354h209.477c5.247 0 9.871 4.237 10.328 9.464l10.845 123.958a1.35 1.35 0 0 1-1.369 1.495H105.33a1.666 1.666 0 0 1-1.631-1.495L92.854 97.818c-.457-5.227 3.425-9.464 8.672-9.464Z"/><path fill="#071435" fill-rule="evenodd" d="M101.481 87.856c-5.522 0-9.22 4.443-8.26 9.924l.757 4.315c.822-3.673 3.978-6.27 8.201-6.27h210.54c4.595 0 9.005 3.075 10.91 7.265l-.93-5.31c-.961-5.481-6.217-9.924-11.74-9.924z" clip-rule="evenodd"/><rect width="108" height="108" fill="#02132D" fill-opacity=".5" rx="54" transform="matrix(1 0 .08716 .9962 246.5 74.57)"/><rect width="107" height="107" x=".544" y=".498" fill="url(#k)" stroke="#7384AD" rx="53.5" transform="matrix(1 0 .08716 .9962 264.88 56.617)"/><path fill="#434F6F" fill-rule="evenodd" d="M332.098 96.246c0 7.312-5.994 13.26-13.362 13.26-7.367 0-13.361-5.948-13.361-13.26s5.994-13.26 13.361-13.26 13.362 5.948 13.362 13.26m-29.466 46.337c-5.999-3.171-9.589-7.472-9.982-11.957-.194-2.221.403-4.42 1.757-6.471s3.437-3.916 6.133-5.486c2.696-1.571 5.95-2.816 9.577-3.666s7.556-1.287 11.562-1.287c4.007 0 8.012.437 11.788 1.287s7.248 2.095 10.219 3.666 5.38 3.434 7.093 5.486 2.694 4.25 2.888 6.471c.393 4.485-2.445 8.786-7.889 11.957s-13.048 4.953-21.14 4.953c-8.091 0-16.007-1.782-22.006-4.953" clip-rule="evenodd"/><path fill="#6599FF" fill-rule="evenodd" d="M337.098 90.246c0 7.312-5.994 13.26-13.362 13.26-7.367 0-13.361-5.948-13.361-13.26s5.994-13.26 13.361-13.26 13.362 5.948 13.362 13.26m-29.466 46.337c-5.999-3.171-9.589-7.472-9.982-11.957-.194-2.221.403-4.42 1.757-6.471s3.437-3.916 6.133-5.486c2.696-1.571 5.95-2.816 9.577-3.666s7.556-1.287 11.562-1.287c4.007 0 8.012.437 11.788 1.287s7.248 2.095 10.219 3.666 5.38 3.434 7.093 5.486 2.694 4.25 2.888 6.471c.393 4.485-2.445 8.786-7.889 11.957s-13.048 4.953-21.14 4.953c-8.091 0-16.007-1.782-22.006-4.953" clip-rule="evenodd"/><path fill="#031031" fill-opacity=".5" fill-rule="evenodd" d="m161.055 128.365 28.66 8.821c1.076.33 1.878 1.301 1.956 2.4l3.072 35.11v.003c-.04.279-.863 6.036-6.064 11.611-4.631 4.974-16.473 11.605-19.042 12.915l-1.302.678c-.343.183-.986.192-1.361 0l-1.421-.678a10 10 0 0 0-.462-.22 27 27 0 0 1-.957-.458c-4.799-2.399-15.802-7.932-20.564-12.237-6.146-5.556-7.984-11.293-8.085-11.608l-.002-.006-3.072-35.11c-.105-1.099.518-2.07 1.537-2.4zm6.113 66.088.019.009s.009 0 .026-.009zm.377-20.389h4.505c1.471 0 2.562-1.191 2.435-2.657h-.009l-.01-.109c-.128-1.466-1.428-2.657-2.899-2.657h-4.505l-.408-4.662c3.88-1.054 6.341-4.873 6.115-8.922.004-.064-.002-.128-.007-.192q.002-.054-.007-.102l-.007-.054c-.206-1.823-.911-3.682-2.108-5.175a11.26 11.26 0 0 0-5.118-3.636c-3.605-1.273-7.862-.11-9.983 2.757-1.225 1.658-1.835 3.518-1.832 5.651.007 1.869.697 3.866 1.811 5.46 1.072 1.529 2.596 2.876 4.308 3.627.506.219 1.009.393 1.509.54q.002.033.001.067l.002.08 1.427 16.304c.128 1.466 1.427 2.656 2.898 2.656s2.563-1.19 2.434-2.656zm-.834-16.882a1 1 0 0 0-.056.092 4 4 0 0 1-.341.41 2 2 0 0 1-.305.303 2 2 0 0 0-.276.201 8 8 0 0 1-.604.348c-.321.119-.661.22-1.005.284a7 7 0 0 1-1.076 0 9 9 0 0 1-1.054-.284 8 8 0 0 1-.792-.43 1 1 0 0 0-.098-.064 7 7 0 0 1-.446-.376 4 4 0 0 1-.27-.258l-.071-.072a3 3 0 0 0-.228-.293 9 9 0 0 1-.405-.632 7 7 0 0 1-.375-1.026 7 7 0 0 1-.093-1.072c.043-.348.105-.686.195-1.025q.16-.388.367-.751a1 1 0 0 0 .056-.092c.107-.147.224-.284.341-.412.072-.086.155-.167.237-.246l.067-.065c.165-.11.251-.174.276-.201q.294-.189.604-.349a6.4 6.4 0 0 1 1.005-.284 7 7 0 0 1 1.076 0c.356.074.704.166 1.055.284q.405.194.791.431c.011.009.05.037.098.064q.236.182.446.376c.094.079.183.169.27.258l.071.071c.126.175.198.266.228.294q.216.308.405.632c.149.339.281.687.375 1.035.034.173.06.356.075.531l.009.255.009.276a7 7 0 0 1-.194 1.035q-.16.389-.367.752" clip-rule="evenodd"/><path fill="#8092EE" fill-rule="evenodd" d="m166.536 122.143 28.659 8.82c1.077.33 1.879 1.302 1.957 2.401l3.072 35.109-.001.003c-.04.279-.862 6.036-6.063 11.611-4.631 4.974-16.473 11.606-19.043 12.915l-1.302.678c-.342.183-.985.192-1.361 0l-1.42-.678c-.138-.071-.282-.137-.463-.22a29 29 0 0 1-.957-.457c-4.798-2.4-15.802-7.933-20.564-12.238-6.145-5.556-7.983-11.293-8.084-11.608l-.002-.006-3.072-35.109c-.105-1.099.518-2.071 1.537-2.401zm6.112 66.087.02.009s.009 0 .026-.009zm.377-20.389h4.506c1.471 0 2.562-1.191 2.434-2.657h-.009l-.01-.109c-.128-1.466-1.427-2.657-2.898-2.657h-4.506l-.408-4.662c3.881-1.054 6.341-4.873 6.116-8.922a1 1 0 0 0-.008-.192.4.4 0 0 0-.007-.102q-.004-.025-.006-.054c-.206-1.822-.911-3.682-2.109-5.175a11.26 11.26 0 0 0-5.118-3.636c-3.605-1.273-7.861-.11-9.983 2.757-1.225 1.658-1.835 3.518-1.832 5.652.007 1.868.697 3.865 1.811 5.459 1.072 1.529 2.597 2.876 4.308 3.627.506.219 1.009.394 1.509.54q.002.033.002.067l.002.08 1.426 16.304c.128 1.466 1.428 2.656 2.899 2.656s2.562-1.19 2.434-2.656zm-.833-16.882a.5.5 0 0 0-.056.092 4 4 0 0 1-.342.41 2.2 2.2 0 0 1-.304.303c-.166.11-.251.174-.277.201-.2.129-.393.239-.604.348-.32.119-.661.22-1.005.284a7 7 0 0 1-1.076 0 9 9 0 0 1-1.054-.284 8 8 0 0 1-.791-.43 1 1 0 0 0-.098-.064 6 6 0 0 1-.447-.376 4 4 0 0 1-.27-.258l-.071-.072a3 3 0 0 0-.228-.293 9 9 0 0 1-.404-.632 7 7 0 0 1-.375-1.026 7 7 0 0 1-.094-1.071c.043-.349.106-.687.195-1.026a7 7 0 0 1 .367-.751.5.5 0 0 0 .056-.092q.164-.22.341-.412c.072-.086.156-.167.238-.246l.066-.065c.166-.11.251-.174.277-.201q.293-.188.604-.348c.32-.119.661-.22 1.005-.284a7 7 0 0 1 1.076 0c.355.073.703.165 1.054.284q.407.193.791.43c.011.009.05.037.098.064q.237.182.447.376c.093.079.182.169.27.258l.071.072c.125.174.197.265.228.293q.215.308.404.632c.149.339.281.687.376 1.035.034.173.059.356.074.531l.009.255.01.276a7 7 0 0 1-.195 1.035q-.16.389-.366.752" clip-rule="evenodd"/><path fill="#031031" fill-opacity=".5" fill-rule="evenodd" d="M249.143 139.557h-37.678l.357 4.085H249.5zm1.139 13.022h-37.678l.358 4.085h37.677zm-36.539 13.022h37.678l.358 4.085h-37.678zm38.817 13.021h-37.677l.357 4.086h37.678z" clip-rule="evenodd"/><path fill="#7887D2" fill-rule="evenodd" d="M252.143 135.557h-37.678l.357 4.085H252.5zm1.139 13.022h-37.678l.358 4.085h37.677zm-36.539 13.022h37.678l.358 4.085h-37.678zm38.817 13.021h-37.677l.357 4.086h37.678z" clip-rule="evenodd"/><defs><linearGradient id="a" x1="228.313" x2="228.313" y1="-98.142" y2="338.976" gradientUnits="userSpaceOnUse"><stop stop-color="#363B42"/><stop offset="1" stop-color="#363B42" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="59.137" x2="59.137" y1="0" y2="17.809" gradientUnits="userSpaceOnUse"><stop stop-color="#EBF3FF"/><stop offset="1" stop-color="#D4E4FF"/></linearGradient><linearGradient id="c" x1="59.137" x2="59.137" y1="0" y2="17.809" gradientUnits="userSpaceOnUse"><stop stop-color="#7D87A1"/><stop offset="1" stop-color="#97A1BB"/></linearGradient><linearGradient id="d" x1="1.411" x2="66.523" y1="88.093" y2="99.442" gradientUnits="userSpaceOnUse"><stop stop-color="#1E3B7A"/><stop offset="1" stop-color="#153F8B"/></linearGradient><linearGradient id="e" x1="68.945" x2="68.945" y1="0" y2="105.817" gradientUnits="userSpaceOnUse"><stop stop-color="#E7F0FF"/><stop offset="1" stop-color="#F4F8FF"/></linearGradient><linearGradient id="f" x1="68.945" x2="68.945" y1="0" y2="105.817" gradientUnits="userSpaceOnUse"><stop stop-color="#586075"/><stop offset="1" stop-color="#65749C"/></linearGradient><linearGradient id="g" x1="119.119" x2="119.119" y1="0" y2="173.566" gradientUnits="userSpaceOnUse"><stop stop-color="#7D87A1"/><stop offset="1" stop-color="#97A1BB"/></linearGradient><linearGradient id="h" x1="119.119" x2="119.119" y1="0" y2="173.566" gradientUnits="userSpaceOnUse"><stop stop-color="#959FB9"/><stop offset="1" stop-color="#959FB9" stop-opacity="0"/></linearGradient><linearGradient id="i" x1="206.221" x2="206.221" y1="87.856" y2="223.769" gradientUnits="userSpaceOnUse"><stop stop-color="#0C2054"/><stop offset="1" stop-color="#113C81"/></linearGradient><linearGradient id="j" x1="206.221" x2="206.221" y1="87.856" y2="223.769" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#9DA8E1"/></linearGradient><linearGradient id="k" x1="54" x2="54" y1="0" y2="108" gradientUnits="userSpaceOnUse"><stop stop-color="#586075"/><stop offset="1" stop-color="#65749C"/></linearGradient></defs></svg>

package/src/{pages/system → built-in/authorization/pages}/not-permission/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useUserStore } from '@/stores';
+import { useUserStore } from '@/features/stores';
 
 defineOptions({
   name: 'NotPermission',
@@ -31,11 +31,9 @@ onMounted(() => {
   }, 1000);
 });
 
-async function goBack() {
-  await userStore.logout();
-  router.push({
-    name: 'login',
-  });
+function goBack() {
+  userStore.logout();
+  router.push('/login');
 }
 </script>
 
@@ -58,16 +56,14 @@ async function goBack() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .noPermissionIcon {
-  background: url("@/assets/icons/403.svg") no-repeat;
+  background: url("./403.svg") no-repeat;
   background-size: 100% 100%;
 }
 
-[data-theme="dark"] {
-  .noPermissionIcon {
-    background: url("@/assets/icons/403_dark.svg") no-repeat;
-    background-size: 100% 100%;
-  }
+[data-theme="dark"] .noPermissionIcon {
+  background: url("./403_dark.svg") no-repeat;
+  background-size: 100% 100%;
 }
 </style>

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/built-in/layout-component/assets/icons/favorites.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 190 170" preserveAspectRatio="xMidYMid meet"><mask id="a" width="190" height="170" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#D9D9D9" d="M0 0h190v170H0z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="95" cy="84.706" fill="url(#c)" fill-opacity=".8" rx="65" ry="64.706" shape-rendering="crispEdges"/></g><g filter="url(#d)"><rect width="146" height="98" x="22" y="35" fill="#fff" rx="3.065"/><rect width="146" height="98" x="22" y="35" fill="url(#e)" rx="3.065"/></g><rect width="101" height="6" x="58" y="78.706" fill="#EEF2F6" opacity=".7" rx="1.022"/><rect width="101" height="6" x="58" y="90.706" fill="#EEF2F6" opacity=".7" rx="1.022"/><rect width="101" height="6" x="58" y="102.706" fill="#EEF2F6" opacity=".7" rx="1.022"/><rect width="101" height="6" x="58" y="114.706" fill="#EEF2F6" opacity=".7" rx="1.022"/><rect width="101" height="6" x="58" y="54.706" fill="#EEF2F6" opacity=".7" rx="1.022"/><rect width="101" height="6" x="58" y="66.706" fill="#EEF2F6" opacity=".7" rx="1.022"/><rect width="9.254" height="4.083" x="66.193" y="39.46" fill="#ADBACC" opacity=".499" rx="2.042"/><path fill="#F2F4F6" d="M22 44.188h28.789V133h-25.19C23.61 133 22 131.629 22 129.938z"/><rect width="26.732" height="8.167" x="23.028" y="54.907" fill="#06F" fill-opacity=".16" rx="1.022"/><rect width="20.563" height="3.063" x="26.112" y="57.458" fill="#176DE6" rx=".511"/><path fill="#176DE6" d="M23.028 57.458h.223c.286 0 .429 0 .538.056a.5.5 0 0 1 .223.223c.056.11.056.252.056.538v1.428c0 .286 0 .43-.056.539a.5.5 0 0 1-.223.223c-.11.055-.252.055-.538.055h-.141c-.029 0-.043 0-.054-.005a.05.05 0 0 1-.022-.022c-.006-.011-.006-.026-.006-.054z"/><rect width="14.394" height="3.063" x="26.112" y="49.291" fill="#D8E0EB" rx=".511"/><rect width="14.394" height="3.063" x="26.112" y="65.625" fill="#D8E0EB" rx=".511"/><rect width="14.394" height="3.063" x="26.112" y="73.792" fill="#D8E0EB" rx=".511"/><rect width="14.394" height="3.063" x="26.112" y="81.958" fill="#D8E0EB" rx=".511"/><rect width="14.394" height="3.063" x="26.112" y="90.125" fill="#D8E0EB" rx=".511"/><rect width="14.394" height="3.063" x="26.112" y="98.292" fill="#D8E0EB" rx=".511"/><rect width="12.338" height="3.063" x="26.112" y="126.875" fill="#D8E0EB" rx=".511"/><ellipse cx="27.655" cy="39.594" fill="#fff" opacity=".747" rx="1.542" ry="1.531"/><ellipse cx="33.824" cy="39.594" fill="#fff" opacity=".747" rx="1.542" ry="1.531"/><ellipse cx="39.993" cy="39.594" fill="#fff" opacity=".747" rx="1.542" ry="1.531"/><g filter="url(#f)"><path fill="#fff" d="M22 38.065A3.064 3.064 0 0 1 25.064 35h139.871A3.065 3.065 0 0 1 168 38.065v8.164H22z"/><path fill="url(#g)" d="M22 38.065A3.064 3.064 0 0 1 25.064 35h139.871A3.065 3.065 0 0 1 168 38.065v8.164H22z"/></g><rect width="21.592" height="3.063" x="30.226" y="39.083" fill="#CFD8E5" opacity=".7" rx="1.022"/><rect width="8.225" height="3.063" x="151.549" y="39.083" fill="#CFD8E5" opacity=".7" rx="1.022"/><circle cx="44.581" cy="25.29" r="1.935" fill="#D9E8FD"/><circle cx="49.097" cy="22.064" r="1.29" fill="#D9E8FD"/><circle cx="178.129" cy="96.903" r="3.871" fill="#D9E8FD"/><circle cx="176.839" cy="86.581" r="1.29" fill="#D9E8FD"/><g filter="url(#h)"><rect width="76" height="88" x="100" y="53" fill="#fff" rx="3.065"/><rect width="76" height="88" x="100" y="53" fill="url(#i)" rx="3.065"/><rect width="76" height="88" x="100" y="53" fill="#F5F7FA" rx="3.065"/><rect width="76" height="88" x="100" y="53" stroke="#E6E9ED" rx="3.065"/></g><rect width="64" height="21" x="106" y="60.706" fill="#fff" rx="2"/><rect width="9" height="9" x="110" y="64.206" fill="#3AC27D" opacity=".15" rx="2"/><path fill="#30B471" fill-rule="evenodd" d="M116.96 66.175h-4.92a.33.33 0 0 0-.255.1.35.35 0 0 0-.097.262v4.338a.35.35 0 0 0 .097.262c.067.07.16.105.255.1h4.92a.33.33 0 0 0 .255-.1.35.35 0 0 0 .097-.262v-4.338a.35.35 0 0 0-.097-.262.33.33 0 0 0-.255-.1m-2.46 3.615h-1.757v-.723h1.757zm-1.757-1.446h3.514v-.723h-3.514z" clip-rule="evenodd"/><rect width="3" height="3" x="109" y="75.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="114" y="75.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="119" y="75.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="124" y="75.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="129" y="75.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="134" y="75.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="164" y="75.706" fill="#DADFE6" rx=".5"/><path fill="#ADBACC" d="M123 65.706a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-16a1 1 0 0 1-1-1z" opacity=".498"/><path fill="#E8EBF1" d="M123 70.706a1 1 0 0 1 1-1h42a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-42a1 1 0 0 1-1-1z"/><rect width="64" height="21" x="106" y="86.706" fill="#fff" rx="2"/><rect width="9" height="9" x="110" y="90.206" fill="#1A78FF" opacity=".15" rx="2"/><path fill="#0070FF" d="m117.424 96.28-.33-.117-2.241.808a1.04 1.04 0 0 1-.703 0l-2.244-.808-.33.118a.26.26 0 0 0-.17.24c0 .108.068.204.17.24l2.836 1.023a.26.26 0 0 0 .176 0l2.836-1.022a.26.26 0 0 0 .17-.24.26.26 0 0 0-.17-.241z"/><path fill="#0070FF" d="m117.424 94.747-.33-.118-2.241.807a1.04 1.04 0 0 1-.703 0l-2.244-.807-.33.118a.26.26 0 0 0-.17.24c0 .108.068.204.17.24l2.836 1.023a.26.26 0 0 0 .176 0l2.836-1.023a.26.26 0 0 0 .17-.24.26.26 0 0 0-.17-.24"/><path fill="#0070FF" d="m117.424 93.213-2.836-1.023a.26.26 0 0 0-.176 0l-2.836 1.023a.26.26 0 0 0-.17.24c0 .108.068.204.17.24l2.836 1.023a.26.26 0 0 0 .176 0l2.836-1.023a.26.26 0 0 0 .17-.24.26.26 0 0 0-.17-.24"/><rect width="3" height="3" x="109" y="101.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="114" y="101.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="119" y="101.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="124" y="101.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="129" y="101.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="134" y="101.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="164" y="101.706" fill="#DADFE6" rx=".5"/><path fill="#ADBACC" d="M123 91.706a1 1 0 0 1 1-1h20a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-20a1 1 0 0 1-1-1z" opacity=".498"/><path fill="#E8EBF1" d="M123 96.706a1 1 0 0 1 1-1h38a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-38a1 1 0 0 1-1-1z" opacity=".498"/><rect width="64" height="21" x="106" y="112.706" fill="#fff" rx="2"/><rect width="9" height="9" x="110" y="116.206" fill="#904EE2" opacity=".15" rx="2"/><path fill="#9046EB" d="M116.708 120.306a.45.45 0 0 0-.408-.25h-1.585l.653-1.57a.424.424 0 0 0-.188-.532.46.46 0 0 0-.576.095l-2.25 2.596a.42.42 0 0 0-.062.461.46.46 0 0 0 .408.249h1.585l-.653 1.57a.424.424 0 0 0 .188.532.46.46 0 0 0 .576-.094l2.25-2.597a.42.42 0 0 0 .062-.46"/><rect width="3" height="3" x="109" y="127.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="114" y="127.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="119" y="127.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="124" y="127.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="129" y="127.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="134" y="127.706" fill="#E6E9ED" fill-opacity=".8" rx=".5"/><rect width="3" height="3" x="164" y="127.706" fill="#DADFE6" rx=".5"/><path fill="#ADBACC" d="M123 117.706a1 1 0 0 1 1-1h20a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-20a1 1 0 0 1-1-1z" opacity=".498"/><path fill="#E8EBF1" d="M123 122.706a1 1 0 0 1 1-1h38a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-38a1 1 0 0 1-1-1z" opacity=".498"/></g><defs><linearGradient id="c" x1="166.5" x2="61.117" y1="161.206" y2="19.248" gradientUnits="userSpaceOnUse"><stop stop-color="#C4DCFF"/><stop offset="1" stop-color="#F5F7FA"/></linearGradient><linearGradient id="e" x1="-46.531" x2="39.043" y1="81.461" y2="210.632" gradientUnits="userSpaceOnUse"><stop stop-color="#F7F8FA"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="g" x1="-46.531" x2="-44.923" y1="40.324" y2="61.498" gradientUnits="userSpaceOnUse"><stop stop-color="#F7F8FA"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="i" x1="64.326" x2="147.037" y1="94.72" y2="167.095" gradientUnits="userSpaceOnUse"><stop stop-color="#F7F8FA"/><stop offset="1" stop-color="#fff"/></linearGradient><filter id="b" width="150" height="152.412" x="20" y="15" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="8"/><feGaussianBlur stdDeviation="5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.570833 0 0 0 0 0.749653 0 0 0 0 1 0 0 0 0.12 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_76_32712"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="1"/><feGaussianBlur stdDeviation="3"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend in2="effect1_dropShadow_76_32712" result="effect2_dropShadow_76_32712"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_76_32712" result="shape"/></filter><filter id="d" width="156" height="108" x="17" y="32" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="2"/><feGaussianBlur stdDeviation="2.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.504167 0 0 0 0 0.711918 0 0 0 0 1 0 0 0 0.1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_76_32712"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_76_32712" result="shape"/></filter><filter id="f" width="154.172" height="19.401" x="17.914" y="32.957" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="2.043"/><feGaussianBlur stdDeviation="2.043"/><feColorMatrix values="0 0 0 0 0.819608 0 0 0 0 0.85098 0 0 0 0 0.901961 0 0 0 0.3 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_76_32712"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_76_32712" result="shape"/></filter><filter id="h" width="87" height="99" x="94.5" y="49.5" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="2"/><feGaussianBlur stdDeviation="2.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.504167 0 0 0 0 0.711918 0 0 0 0 1 0 0 0 0.2 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_76_32712"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_76_32712" result="shape"/></filter></defs></svg>

package/src/built-in/layout-component/assets/icons/toolbar-collapse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="icon" viewBox="0 0 1028 1024" preserveAspectRatio="xMidYMid meet"><path d="M989.867 234.667H499.2c-17.067 0-34.133-21.334-34.133-42.667 0-25.6 12.8-42.667 34.133-42.667h490.667c17.066 0 34.133 17.067 34.133 42.667 0 21.333-12.8 42.667-34.133 42.667m-473.6 128h465.066c25.6 0 46.934 21.333 46.934 42.666 0 25.6-21.334 42.667-46.934 42.667H516.267c-25.6 0-46.934-17.067-46.934-42.667s21.334-42.666 46.934-42.666m0 298.666c-25.6 0-46.934-21.333-46.934-42.666 0-25.6 21.334-42.667 46.934-42.667h465.066c25.6 0 46.934 17.067 46.934 42.667s-21.334 42.666-46.934 42.666zm4.266 128H972.8c29.867 0 51.2 17.067 51.2 42.667s-21.333 42.667-51.2 42.667H520.533c-29.866 0-51.2-17.067-51.2-42.667s21.334-42.667 51.2-42.667m-192 25.6c-17.066 17.067-46.933 17.067-64 0L12.8 541.867c-17.067-17.067-17.067-51.2 0-68.267l251.733-273.067c17.067-17.066 46.934-17.066 64 0s17.067 51.2 0 68.267L106.667 507.733l221.866 238.934c17.067 21.333 17.067 51.2 0 68.266"/></svg>

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,