@pubinfo-nightly/core 2025.11.14

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

@@ -0,0 +1,292 @@
+import type { ModuleOptions } from '@/core';
+import { devtoolsStorageKey } from '@pubinfo-nightly/devtools/constants';
+import { setupDevtoolsPanel } from '@pubinfo-nightly/devtools/panel';
+
+/**
+ * 本模块将宿主应用与 @pubinfo/devtools 打通：
+ * - 在应用启动时注册 Devtools 面板（UnoCSS / Chrome / Server Router）。
+ * - 监听 HTTP 钩子，在请求打上 `meta.__devtools__` 时，
+ *   自动把响应快照写入 localStorage，便于面板读取与回放。
+ */
+
+const DEVTOOLS_RAW_RESPONSE_KEY = devtoolsStorageKey.response;
+
+const methodNameMap: Record<string, string> = {
+  GET: 'Get',
+  POST: 'Post',
+  PUT: 'Put',
+  PATCH: 'Patch',
+  DELETE: 'Delete',
+  HEAD: 'Head',
+};
+
+const requestMethodNames = Object.values(methodNameMap);
+
+/**
+ * 粗略判断一个值是否为「请求实例」。
+ *
+ * 判定规则：对象上是否存在大小写首字母形式的方法（Get/Post/...）。
+ * 这是对 packages/core/src/core/request.ts 导出的请求封装的一个宽松契约检查。
+ */
+function isRequestInstance(value: any) {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+  return requestMethodNames.some(name => typeof (value as any)[name] === 'function');
+}
+
+/**
+ * 将任意 payload 转为可序列化的普通对象（若可能）。
+ *
+ * - 通过 JSON 序列化/反序列化去除响应对象上的循环引用、原型链等复杂结构。
+ * - 若序列化失败（比如含不可序列化值或循环引用），则返回原值。
+ */
+function toPlainObject<T>(payload: T): T {
+  if (payload === undefined || payload === null) {
+    return payload;
+  }
+  try {
+    return JSON.parse(JSON.stringify(payload)) as T;
+  }
+  catch {
+    return payload;
+  }
+}
+
+interface DevtoolsRequestPayload {
+  moduleCandidates?: string[]
+  exportName?: string
+  method: string
+  args?: any[]
+}
+
+interface DevtoolsResponsePayload {
+  success: boolean
+  result?: any
+  error?: {
+    message: string
+    stack?: string
+    name?: string
+  }
+}
+
+/**
+ * 将一次请求的响应快照持久化到 localStorage。
+ *
+ * - 仅在浏览器环境生效（SSR 时直接跳过）。
+ * - 存储失败（超配额/序列化失败）时静默忽略，避免影响应用行为。
+ *
+ * @param _method 原始请求方法（预留位，当前未使用）
+ * @param payload 响应对象或错误对象（尽量保持原貌）
+ */
+function storeDevtoolsResponse(_method: any, payload: any) {
+  if (typeof localStorage === 'undefined') {
+    return;
+  }
+  try {
+    localStorage.setItem(DEVTOOLS_RAW_RESPONSE_KEY, JSON.stringify(payload));
+  }
+  catch {
+    // ignore serialization/storage failures
+  }
+}
+
+/**
+ * 解析一组候选模块，尝试找到并返回「请求实例」。
+ *
+ * 查找顺序：
+ * 1) 指定的具名导出（若提供 exportName 且命中并为请求实例则返回）。
+ * 2) 默认导出（若存在且为请求实例）。
+ * 3) 其他任一导出成员中第一个满足 isRequestInstance 的值。
+ *
+ * 任一候选路径导入失败时会被忽略，继续尝试下一个。
+ */
+async function resolveRequestInstance(
+  candidates: string[] = [],
+  exportName?: string,
+) {
+  for (const specifier of candidates) {
+    if (!specifier) {
+      continue;
+    }
+    try {
+      const module = await import(/* @vite-ignore */ specifier);
+      const namedExport = exportName ? module?.[exportName] : undefined;
+      if (namedExport && isRequestInstance(namedExport)) {
+        return namedExport;
+      }
+      const defaultExport = module?.default;
+      if (defaultExport && isRequestInstance(defaultExport)) {
+        return defaultExport;
+      }
+      for (const value of Object.values(module)) {
+        if (isRequestInstance(value)) {
+          return value;
+        }
+      }
+    }
+    catch {
+      // 忽略导入失败的候选路径，继续尝试下一个。
+    }
+  }
+  return undefined;
+}
+
+/**
+ * 根据面板发来的 payload 执行一次 API 请求。
+ *
+ * 输入契约（payload）：
+ * - moduleCandidates: string[] 可能导出请求实例的模块路径（可为绝对/相对/别名）。
+ * - exportName:       string   可选，期望从模块中拿到的具名导出名。
+ * - method:           string   HTTP 方法（GET/POST/...）。
+ * - args:             any[]    传递给请求方法的参数（如 path/query/body 等）。
+ *
+ * 行为：
+ * - 解析请求实例 → 获取对应的方法 → 调用并等待结果。
+ * - 若返回值带有 .send()，则优先调用 .send() 以与内部请求封装对齐。
+ * - 返回标准化的结果：{ success, result } 或 { success:false, error }。
+ */
+async function executeDevtoolsRequest(payload: DevtoolsRequestPayload): Promise<DevtoolsResponsePayload> {
+  const response: DevtoolsResponsePayload = {
+    success: false,
+  };
+
+  try {
+    const method = (payload.method ?? '').toUpperCase();
+    const mappedMethod = methodNameMap[method];
+    if (!mappedMethod) {
+      throw new Error(`请求实例不支持 ${method} 方法`);
+    }
+
+    const requestInstance: any = await resolveRequestInstance(
+      payload.moduleCandidates,
+      payload.exportName,
+    );
+
+    if (!requestInstance) {
+      throw new TypeError('未找到匹配的请求实例，请确认 API 文件的 request 导入可被 devtools 解析。');
+    }
+
+    const requestMethod = requestInstance[mappedMethod];
+    if (typeof requestMethod !== 'function') {
+      throw new TypeError(`请求实例不支持 ${method} 方法`);
+    }
+
+    let methodResult = requestMethod.apply(requestInstance, payload.args ?? []);
+    if (methodResult && typeof methodResult.send === 'function') {
+      methodResult = await methodResult.send();
+    }
+    else {
+      methodResult = await methodResult;
+    }
+
+    response.success = true;
+    response.result = toPlainObject(methodResult);
+  }
+  catch (error) {
+    if (error && typeof error === 'object' && 'response' in (error as any) && (error as any).response) {
+      response.success = true;
+      response.result = toPlainObject((error as any).response);
+    }
+    else if (error && typeof error === 'object' && !(error instanceof Error)) {
+      response.success = true;
+      response.result = toPlainObject(error);
+    }
+    else {
+      response.success = false;
+      response.error = {
+        message: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+        name: error instanceof Error ? error.name : undefined,
+      };
+    }
+  }
+
+  return response;
+}
+
+const MESSAGE_REQUEST_TYPE = 'pubinfo-nightly:devtools-request';
+const MESSAGE_RESPONSE_TYPE = 'pubinfo-nightly:devtools-response';
+
+let devtoolsBridgeInitialised = false;
+
+/**
+ * 在宿主页面和 Devtools iframe 之间建立 message 通信桥。
+ *
+ * 协议：
+ * - request:  { type: 'pubinfo-nightly:devtools-request', id, payload }
+ * - response: { type: 'pubinfo-nightly:devtools-response', id, ...result }
+ *
+ * 注意：
+ * - 仅初始化一次；SSR/非浏览器环境跳过。
+ * - postMessage 使用 event.origin → fallback '*'，尽量遵循同源策略。
+ */
+function setupDevtoolsRequestBridge() {
+  if (devtoolsBridgeInitialised || typeof window === 'undefined') {
+    return;
+  }
+  devtoolsBridgeInitialised = true;
+  window.addEventListener('message', async (event) => {
+    const data = (event as MessageEvent<any>).data;
+    if (!data || data.type !== MESSAGE_REQUEST_TYPE || !data.id) {
+      return;
+    }
+    const payload: DevtoolsRequestPayload = data.payload ?? {};
+    const responsePayload = await executeDevtoolsRequest(payload);
+    const message = {
+      type: MESSAGE_RESPONSE_TYPE,
+      id: data.id,
+      ...responsePayload,
+    };
+
+    const target = (event.source as Window | null) ?? window.parent ?? window;
+    const origin = (event.origin && event.origin !== 'null') ? event.origin : (window.location?.origin ?? '*');
+    try {
+      target.postMessage(message, origin);
+    }
+    catch {
+      target.postMessage(message, '*');
+    }
+  });
+}
+
+/**
+ * 内置 Devtools 模块。
+ *
+ * 注册时机：`enforce: 'post'`，确保在路由/请求等核心模块之后挂载。
+ *
+ * 行为：
+ * - setup：注册各类 devtools 面板。
+ * - setup：监听来自 Devtools iframe 的消息，响应接口调试请求。
+ * - hooks.http:response：当请求元信息中显式标记 `__devtools__` 时，
+ *   将响应（或错误响应）快照保存到 localStorage，供面板读取。
+ */
+export function Devtools(): ModuleOptions {
+  return {
+    name: 'built-in:devtools',
+    enforce: 'post',
+    setup() {
+      setupDevtoolsPanel();
+      setupDevtoolsRequestBridge();
+    },
+    hooks: {
+      'http:response': {
+        onSuccess(response, method) {
+          const methodMeta = (method as any)?.meta ?? (method as any)?.config?.meta;
+          if (methodMeta?.__devtools__) {
+            storeDevtoolsResponse(method, response);
+          }
+          return response;
+        },
+        onError(error, method) {
+          const methodMeta = (method as any)?.meta ?? (method as any)?.config?.meta;
+          if (methodMeta?.__devtools__) {
+            const payload = (error as any)?.response ?? error;
+            storeDevtoolsResponse(method, payload);
+          }
+          return error;
+        },
+      },
+    },
+  };
+}

package/src/built-in/index.ts

@@ -0,0 +1,9 @@
+export * from './authentication';
+export * from './authorization';
+export * from './devtools';
+export * from './layout-component';
+export * from './n-progress';
+export * from './pinia-plugin';
+export * from './pre-access';
+export * from './settings';
+export * from './system-info';

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

@@ -0,0 +1,358 @@
+<script setup lang="ts">
+import type { LayoutProps } from './interface';
+import { useCssVar } from '@vueuse/core';
+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 { useContext } from './composables/useContext';
+import { useGetSidebarActualWidth } from './composables/useGetComputedStyle';
+import { useHotkey } from './composables/useHotkey';
+import { createLayoutVisible, useLayoutVisible } from './composables/useLayoutVisible';
+import { useWatermark } from './composables/useWatermark';
+
+defineOptions({
+  name: 'Layout',
+});
+
+const props = withDefaults(
+  defineProps<LayoutProps>(),
+  {
+    showHeader: true,
+    showSidebar: true,
+    showTabbar: true,
+    showToolbar: true,
+  },
+);
+
+createLayoutVisible(props);
+const { show } = useLayoutVisible(props);
+
+const routeInfo = useRoute();
+const { auth } = useAuth();
+const { settingsStore } = useContext();
+const { mainSidebarActualWidth, subSidebarActualWidth } = useGetSidebarActualWidth();
+useHotkey();
+useWatermark();
+
+const isAuth = computed(() => {
+  return routeInfo.matched.every(item => auth(item.meta.auth ?? ''));
+});
+
+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;
+    });
+  }
+});
+
+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 = show.value.tabbar
+    ? Number.parseInt(globalTabbarHeight.value!)
+    : 0;
+  const toolbarHeight = show.value.toolbar
+    ? Number.parseInt(globalToolBarHeight.value!)
+    : 0;
+  return tabbarHeight + toolbarHeight;
+});
+
+function onScroll() {
+  scrollTop.value = (document.documentElement || document.body).scrollTop;
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', onScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScroll);
+});
+
+watch(scrollTop, (val, oldVal) => {
+  scrollOnHide.value = settingsStore.settings.topbar.mode === 'sticky' && val > oldVal && val > topbarHeight.value;
+});
+</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 }"
+        >
+          <slot name="sidebar">
+            <LayoutSidebar />
+          </slot>
+        </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 }">
+          <div
+            class="topbar-container"
+            :class="{
+              'has-tabbar': show.tabbar,
+              'has-toolbar': show.toolbar,
+              [`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
+          >
+            <slot name="topbar">
+              <LayoutTopbar />
+            </slot>
+          </div>
+
+          <div class="main">
+            <div
+              v-show="settingsStore.mainPageMaximizeStatus"
+              class="exit-main-page-maximize"
+              @click="settingsStore.setMainPageMaximize()"
+            >
+              <RiLogoutBoxLine />
+            </div>
+
+            <slot v-if="isAuth">
+              <LayoutContent />
+            </slot>
+
+            <slot v-else name="notAllowed">
+              <NotAllowed />
+            </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;
+}
+
+:deep(#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 ::v-deep(.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;
+}
+
+/* 顶部栏 */
+.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/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>