@pubinfo/core 2.0.0-beta.30 → 2.0.0-beta.32

package/src/create.ts

@@ -25,6 +25,7 @@ export function createPubinfo(
   const {
     rootContainer = '#app',
     immediate = true,
+    pure = false,
     modules = [],
     hooks: _hooks = {},
   } = options;
@@ -38,7 +39,7 @@ export function createPubinfo(
       history: createWebHashHistory(base),
       ...restRouterOptions,
       routes: [
-        ...constantRoutes,
+        ...(pure ? [] : constantRoutes),
         ...routes,
       ],
     });
@@ -63,7 +64,11 @@ export function createPubinfo(
     const _modules = extractModules(modules);
 
     await resolveModules(_modules.pre, context);
-    setupBasic(context);
+
+    if (!pure) {
+      setupBasic(context);
+    }
+
     await resolveModules(_modules.default, context);
     await setup?.(context);
     await resolveModules(_modules.post, context);
@@ -74,7 +79,9 @@ export function createPubinfo(
     (async () => {
       const { app, router } = await createApp();
       await router.isReady();
-      await GetAPIValidateIp();
+      if (!pure) {
+        await GetAPIValidateIp();
+      }
       app.mount(rootContainer, true);
     })();
   }

package/src/interface.ts

@@ -15,17 +15,35 @@ export interface Context {
 }
 
 export interface Options {
+  /** 根节点 */
   rootContainer?: string | Element
+
+  /**
+   * 立即执行
+   * @default true
+   */
   immediate?: boolean
+
+  /**
+   * 纯净模式
+   * @default false
+   */
+  pure?: boolean
+
+  /** 模块插件注册 */
   modules?: ModuleOptions[]
+
+  /** 生命周期 */
   hooks?: Partial<Hooks>
 }
 
 export interface Module {
   /** 唯一值 */
   name: string
+
   /** 初始化内容 */
   setup?: (ctx: Context) => void
+
   /**
    * 插件调用顺序:
    * - `enforce: pre` 插件
@@ -35,6 +53,7 @@ export interface Module {
    * - `enforce: post` 插件
    */
   enforce?: 'pre' | 'post'
+
   /** 钩子函数 */
   hooks?: Partial<Hooks>
 }

package/src/layout/Layout.vue

@@ -114,208 +114,160 @@ watch(() => routeInfo.path, () => {
   </div>
 </template>
 
-<style lang="scss" scoped>
-[data-app-width-mode="adaption"] {
-  #app-main {
-    width: 100%;
-  }
+<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="adaption-min-width"] #app-main {
+  width: max(var(--g-app-width), 100%);
 }
 
-[data-app-width-mode="center"] {
-  #app-main {
-    width: var(--g-app-width);
-  }
+[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-app-width-mode="center-max-width"] #app-main {
+  width: min(var(--g-app-width), 100%);
 }
 
-[data-mode="mobile"] {
-  #app-main {
-    width: 100%;
-  }
+[data-mode="mobile"] #app-main {
+  --at-apply: w-full;
+}
 
-  .sidebar-container {
-    transform: translateX(calc((var(--g-main-sidebar-width) + var(--g-sub-sidebar-width)) * -1));
+[data-mode="mobile"] .sidebar-container {
+  transform: translateX(calc((var(--g-main-sidebar-width) + var(--g-sub-sidebar-width)) * -1));
+}
 
-    &.show {
-      transform: translateX(0);
-    }
-  }
+[data-mode="mobile"] .sidebar-container.show {
+  transform: translateX(0);
+}
 
-  .main-container {
-    margin-left: 0 !important;
-  }
+[data-mode="mobile"] .main-container {
+  margin-left: 0 !important;
+}
 
-  &[data-menu-mode="single"] {
-    .sidebar-container {
-      transform: translateX(calc(var(--g-sub-sidebar-width) * -1));
+[data-mode="mobile"][data-menu-mode="single"] .sidebar-container {
+  transform: translateX(calc(var(--g-sub-sidebar-width) * -1));
+}
 
-      &.show {
-        transform: translateX(0);
-      }
-    }
-  }
+[data-mode="mobile"][data-menu-mode="single"] .sidebar-container.show {
+  transform: translateX(0);
 }
 
 .layout {
-  height: 100%;
+  --at-apply: h-full;
 }
 
 #app-main {
-  height: 100%;
-  margin: 0 auto;
-  background-color: var(--g-bg);
-
-  // 当前标签页全屏
-  &.main-page-maximize {
-    header,
-    .sidebar-container {
-      display: none;
-    }
+  --at-apply: h-full bg-[--g-bg] mx-auto my-0;
+}
 
-    .wrapper {
-      padding-top: 0;
+#app-main.main-page-maximize header,
+#app-main.main-page-maximize .sidebar-container {
+  --at-apply: hidden;
+}
 
-      .main-container {
-        margin-left: 0;
+#app-main.main-page-maximize .wrapper {
+  --at-apply: pt-0;
+}
 
-        .topbar-container {
-          display: none;
-        }
+#app-main.main-page-maximize .wrapper .main-container {
+  --at-apply: ml-0;
+}
 
-        .main {
-          margin: 0;
-        }
-      }
-    }
+#app-main.main-page-maximize .wrapper .main-container .topbar-container {
+  --at-apply: hidden;
+}
 
-    :deep([data-fixed-calc-width]) {
-      width: 100%;
-      transform: translateX(-50%);
-    }
-  }
+#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 {
-  position: relative;
-  width: 100%;
-  height: 100%;
+  --at-apply: relative w-full h-full;
   transition: padding-top 0.3s;
+}
 
-  .sidebar-container {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    z-index: 501;
-    display: 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-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;
+}
 
-  .sidebar-mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 500;
-    width: 100%;
-    height: 100%;
-    visibility: hidden;
-    background-image: radial-gradient(transparent 1px, rgb(0 0 0 / 30%) 1px);
-    background-size: 4px 4px;
-    backdrop-filter: saturate(50%) blur(4px);
-    opacity: 0;
-    transition: all 0.2s;
-
-    &.show {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
+.wrapper .sidebar-mask {
+  --at-apply: fixed z-[500] w-full h-full invisible opacity-0 left-0 top-0;
 
-  .main-sidebar-container:not(.main-sidebar-leave-active) + .sub-sidebar-container {
-    left: var(--g-main-sidebar-width);
-  }
+  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);
+}
 
-  .main-container {
-    display: flex;
-    flex-direction: column;
-    height: 0;
-    min-height: 100%;
-    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;
-
-    .main {
-      position: relative;
-      flex: auto;
-      flex-basis: 0;
-      height: 0;
-      transition: 0.3s;
-
-      .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;
-
-        position: fixed;
-        top: -40px;
-        right: -40px;
-        z-index: 1000;
-        width: 80px;
-        height: 80px;
-        cursor: pointer;
-        border-radius: 50%;
-
-        svg {
-          position: absolute;
-          bottom: 16px;
-          left: 16px;
-        }
-      }
-    }
+.wrapper .sidebar-mask.show {
+  --at-apply: visible op-100;
+}
 
-    .topbar-container.has-tabbar + .main {
-      margin: var(--g-tabbar-height) 0 0;
-    }
+.wrapper .main-sidebar-container:not(.main-sidebar-leave-active) + .sub-sidebar-container {
+  --at-apply: left-[--g-main-sidebar-width];
+}
 
-    .topbar-container.has-toolbar + .main {
-      margin: var(--g-toolbar-height) 0 0;
-    }
+.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;
+}
 
-    .topbar-container.has-tabbar.has-toolbar + .main {
-      margin: calc(var(--g-tabbar-height) + var(--g-toolbar-height)) 0 0;
-    }
-  }
+.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 {
-  padding-top: var(--g-header-height);
+  --at-apply: pt-[--g-header-height];
+}
 
-  .sidebar-container {
-    top: var(--g-header-height);
+header:not(.header-leave-active) + .wrapper .sidebar-container {
+  --at-apply: top-[--g-header-height];
+}
 
-    :deep(.sidebar-logo) {
-      display: none;
-    }
-  }
+header:not(.header-leave-active) + .wrapper .sidebar-container :deep(.sidebar-logo) {
+  --at-apply: hidden;
+}
 
-  .main-container {
-    .topbar-container {
-      top: var(--g-header-height);
+header:not(.header-leave-active) + .wrapper .main-container .topbar-container {
+  --at-apply: top-[--g-header-height];
+}
 
-      :deep(.tools) {
-        display: none;
-      }
-    }
-  }
+header:not(.header-leave-active) + .wrapper .main-container .topbar-container :deep(.tools) {
+  --at-apply: hidden;
 }
 </style>

package/src/layout/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/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 '@/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/layout/components/Content/index.vue

@@ -53,8 +53,7 @@ const Provider = computed(() => {
   <LinkView v-if="isLink" />
 </template>
 
-<style scoped lang="scss">
-// 主内容区动画
+<style scoped>
 .fade-enter-active,
 .slide-left-enter-active,
 .slide-right-enter-active,

package/src/layout/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/components/Header/TopMode/More.vue

@@ -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>

package/src/layout/components/Header/TopMode/NotCursor.vue

@@ -34,44 +34,35 @@ withDefaults(defineProps<{
   </VMenu>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .not-cursor-container {
-  width: 100%;
-  height: 100%;
+--at-apply: size-full;
 }
 </style>
 
-<style lang="scss">
+<style>
 .v-popper--theme-not-cursor {
-  z-index: 1000;
+  --at-apply: z-1000;
+}
+
+.v-popper--theme-not-cursor .v-popper__inner {
+  --at-apply: w-228px h-123px border border-solid border-white rounded-md;
 
-  .v-popper__inner {
-    width: 228px;
-    height: 123px;
-    background-image: linear-gradient(-55deg, #fff 0%, #eaf3ff 87%);
-    border: 1px solid #fff;
-    border-radius: 6px;
-    box-shadow: 4px 8px 14px -4px #8195b74f;
+  background-image: linear-gradient(-55deg, #fff 0%, #eaf3ff 87%);
+  box-shadow: 4px 8px 14px -4px #8195b74f;
+}
 
-    >div {
-      width: 100%;
-      height: 100%;
-    }
-  }
+.v-popper--theme-not-cursor .v-popper__inner > div {
+  --at-apply: size-full;
+}
 
-  .v-popper__arrow-container {
-    display: none;
-  }
+.v-popper--theme-not-cursor .v-popper__arrow-container {
+  --at-apply: hidden;
+  display: none;
 }
 
-.dark {
-  .v-popper--theme-not-cursor {
-    .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-not-cursor .v-popper__inner {
+  --at-apply: shadow-[none] rounded-8px border border-solid border-[#4b4f53];
+  background-image: linear-gradient(-43deg, #141414 0%, #141414 87%);
 }
 </style>

package/src/layout/components/Header/TopMode/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { Menu } from '#/menu';
-import { PubinfoIcon } from '@/components';
 import { useElementSize } from '@vueuse/core';
 import SolarWidget5BoldDuotone from '~icons/solar/widget-5-bold-duotone';
+import { PubinfoIcon } from '@/components';
 import { useContext } from '../../../composables/useContext';
 import useMenu from '../../../composables/useMenu';
 import More from './More.vue';