@pubinfo/core 2.0.0-beta.1

package/src/context.ts

@@ -0,0 +1,30 @@
+import type { Context } from './interface';
+import { createHooks } from 'hookable';
+import { auth, basic } from 'pubinfo:project/api/request';
+import layout from 'pubinfo:project/layouts/index.vue';
+
+export const hooks = createHooks();
+
+let context: Context | undefined;
+
+export function createPubinfoContext(newState: Context) {
+  context = newState;
+}
+
+export function usePubinfoContext() {
+  if (!context) {
+    throw new Error('Global context is not defined');
+  }
+
+  return context;
+}
+
+/**
+ * 读取项目中的约定式目录
+ */
+export function readProject() {
+  return {
+    layout,
+    request: { auth, basic },
+  };
+}

package/src/create.ts

@@ -0,0 +1,88 @@
+import type { Component } from 'vue';
+import type { Context, Options, RouterOptions } from './interface';
+import { createPinia } from 'pinia';
+import { createApp as createVueApp } from 'vue';
+import { createRouter, createWebHashHistory } from 'vue-router';
+
+import { GetAPIValidateIp } from './api/system/app';
+
+import { createPubinfoContext, hooks } from './context';
+import { setupDirectives } from './directives';
+import { setupLayout } from './layout';
+import { setupI18n } from './locales';
+import { extractModules, resolveModules } from './modules';
+import { constantRoutes, setupRouterGuard } from './route';
+import { setupStore } from './stores';
+
+export function createPubinfo(
+  App: Component,
+  routerOptions: RouterOptions,
+  setup?: (context: Context) => Promise<void> | void,
+  options: Options = {},
+) {
+  const {
+    rootContainer = '#app',
+    immediate = true,
+    modules = [],
+    hooks: _hooks = {},
+  } = options;
+
+  async function createApp() {
+    const app = createVueApp(App);
+    const store = createPinia();
+
+    const { routes, base, ...restRouterOptions } = routerOptions;
+    const router = createRouter({
+      history: createWebHashHistory(base),
+      ...restRouterOptions,
+      routes: [
+        ...constantRoutes,
+        ...routes,
+      ],
+    });
+
+    const context: Context = {
+      app,
+      store,
+      router,
+    };
+
+    app.use(store);
+    app.use(router);
+
+    // create context
+    createPubinfoContext(context);
+
+    // add hooks
+    hooks.addHooks(_hooks);
+
+    // extract modules by enforce
+    const _modules = extractModules(modules);
+
+    await resolveModules(_modules.pre, context);
+    setupBasic(context);
+    await resolveModules(_modules.default, context);
+    await setup?.(context);
+    await resolveModules(_modules.post, context);
+    return context;
+  }
+
+  if (immediate) {
+    (async () => {
+      const { app, router } = await createApp();
+      await router.isReady();
+      await GetAPIValidateIp();
+      app.mount(rootContainer, true);
+    })();
+  }
+
+  return createApp;
+}
+
+function setupBasic(context: Context) {
+  setupStore(context);
+  setupRouterGuard(context);
+  setupDirectives(context);
+  setupLayout(context);
+  setupI18n(context);
+}

package/src/directives/index.ts

@@ -0,0 +1,6 @@
+import type { App } from 'vue';
+import { setupPermissionDirective } from './plugins/permission';
+
+export function setupDirectives({ app }: { app: App }) {
+  setupPermissionDirective(app);
+}

package/src/directives/plugins/permission.ts

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

package/src/index.ts

@@ -0,0 +1,12 @@
+import './assets/styles';
+
+export * from './components';
+export * from './composables';
+export * from './config';
+export * from './context';
+export * from './create';
+export * from './interface';
+export * from './layout';
+export * from './route';
+export * from './stores';
+export * from './utils';

package/src/interface.ts

@@ -0,0 +1,35 @@
+import type { Pinia } from 'pinia';
+import type { App } from 'vue';
+import type { Router, RouterOptions as VueRouterOptions } from 'vue-router';
+
+type PartialKeys<T, Keys extends keyof T> = Omit<T, Keys> & Partial<Pick<T, Keys>>;
+
+export type RouterOptions = PartialKeys<VueRouterOptions, 'history'> & { base?: string };
+
+export interface Context {
+  app: App<Element>
+  store: Pinia
+  router: Router
+}
+
+export interface Options {
+  rootContainer?: string | Element
+  immediate?: boolean
+  modules?: ModuleOptions[]
+  hooks?: Partial<Hooks>
+}
+
+export interface Module {
+  name: string
+  setup?: (ctx: Context) => void
+  enforce?: 'pre' | 'post'
+  hooks?: Partial<Hooks>
+}
+
+export type FalsyModule = false | null | undefined;
+
+export type ModuleOptions = Module | ModuleOptions[] | FalsyModule;
+
+export interface Hooks {
+
+}

package/src/layout/Layout.vue

@@ -0,0 +1,330 @@
+<script setup lang="ts">
+import { PubinfoProvider } from '@/components';
+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;
+    });
+  }
+});
+
+function loadIcon(name: string) {
+  const modules = (import.meta as any).glob('../assets/icons/*', { eager: true });
+  const path = `../assets/icons/${name}.svg`;
+  return modules[path]?.default;
+}
+</script>
+
+<template>
+  <PubinfoProvider :load-icon="loadIcon">
+    <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>
+  </PubinfoProvider>
+</template>
+
+<style lang="scss" scoped>
+[data-app-width-mode="adaption"] {
+  #app-main {
+    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-max-width"] {
+  #app-main {
+    width: min(var(--g-app-width), 100%);
+  }
+}
+
+[data-mode="mobile"] {
+  #app-main {
+    width: 100%;
+  }
+
+  .sidebar-container {
+    transform: translateX(calc((var(--g-main-sidebar-width) + var(--g-sub-sidebar-width)) * -1));
+
+    &.show {
+      transform: translateX(0);
+    }
+  }
+
+  .main-container {
+    margin-left: 0 !important;
+  }
+
+  &[data-menu-mode="single"] {
+    .sidebar-container {
+      transform: translateX(calc(var(--g-sub-sidebar-width) * -1));
+
+      &.show {
+        transform: translateX(0);
+      }
+    }
+  }
+}
+
+.layout {
+  height: 100%;
+}
+
+#app-main {
+  height: 100%;
+  margin: 0 auto;
+  background-color: var(--g-bg);
+
+  // 当前标签页全屏
+  &.main-page-maximize {
+    header,
+    .sidebar-container {
+      display: none;
+    }
+
+    .wrapper {
+      padding-top: 0;
+
+      .main-container {
+        margin-left: 0;
+
+        .topbar-container {
+          display: none;
+        }
+
+        .main {
+          margin: 0;
+        }
+      }
+    }
+
+    :deep([data-fixed-calc-width]) {
+      width: 100%;
+      transform: translateX(-50%);
+    }
+  }
+}
+
+.wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  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;
+  }
+
+  .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;
+    }
+  }
+
+  .main-sidebar-container:not(.main-sidebar-leave-active) + .sub-sidebar-container {
+    left: var(--g-main-sidebar-width);
+  }
+
+  .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;
+        }
+      }
+    }
+
+    .topbar-container.has-tabbar + .main {
+      margin: var(--g-tabbar-height) 0 0;
+    }
+
+    .topbar-container.has-toolbar + .main {
+      margin: var(--g-toolbar-height) 0 0;
+    }
+
+    .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);
+
+  .sidebar-container {
+    top: var(--g-header-height);
+
+    :deep(.sidebar-logo) {
+      display: none;
+    }
+  }
+
+  .main-container {
+    .topbar-container {
+      top: var(--g-header-height);
+
+      :deep(.tools) {
+        display: none;
+      }
+    }
+  }
+}
+</style>

package/src/layout/components/BackTop/index.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import IconParkOutlineToTopOne from '~icons/icon-park-outline/to-top-one';
+
+defineOptions({
+  name: 'BackTop',
+});
+
+const transitionClass = {
+  enterActiveClass: 'ease-out duration-300',
+  enterFromClass: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+  enterToClass: 'opacity-100 translate-y-0 sm:scale-100',
+  leaveActiveClass: 'ease-in duration-200',
+  leaveFromClass: 'opacity-100 translate-y-0 sm:scale-100',
+  leaveToClass: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+};
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll);
+  handleScroll();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScroll);
+});
+
+const scrollTop = ref<number | null>(null);
+function handleScroll() {
+  scrollTop.value = document.documentElement.scrollTop;
+}
+
+function handleClick() {
+  document.documentElement.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  });
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition v-bind="transitionClass">
+      <div v-if="scrollTop && scrollTop >= 200" class="fixed bottom-4 right-4 z-1000 h-12 w-12 flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg ring-1 ring-stone-3 ring-inset dark:bg-dark hover:bg-stone-1 dark:ring-stone-7 dark:hover:bg-dark/50" @click="handleClick">
+        <IconParkOutlineToTopOne text="24px" />
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/src/layout/components/Content/IframeView.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import LineMdLoadingTwotoneLoop from '~icons/line-md/loading-twotone-loop';
+import { useContext } from '../../composables/useContext';
+
+defineOptions({
+  name: 'IframeView',
+});
+
+const route = useRoute();
+const { settingsStore, iframeStore } = useContext();
+
+const iframeRef = ref();
+
+watch(() => route.fullPath, (val) => {
+  nextTick(() => {
+    iframeRef.value?.forEach((item: HTMLIFrameElement) => {
+      if (item.dataset.path === val) {
+        item.onload = () => {
+          iframeStore.closeLoading(val);
+        };
+      }
+    });
+  });
+},
+{
+  immediate: true,
+});
+</script>
+
+<template>
+  <div class="iframe-view absolute left-0 top-0 h-full w-full flex flex-col">
+    <div
+      v-for="item in iframeStore.openedList"
+      :key="item.path"
+      class="absolute left-0 top-0 h-full w-full flex flex-col"
+      :class="{ 'z-1': route.fullPath === item.path }"
+    >
+      <Transition :name="settingsStore.settings.mainPage.enableTransition ? settingsStore.settings.mainPage.transitionMode : ''" mode="out-in" appear>
+        <iframe
+          v-show="route.fullPath === item.path"
+          ref="iframeRef"
+          :data-path="item.path"
+          :src="item.src"
+          frameborder="0"
+          class="h-full w-full flex-1"
+        />
+      </Transition>
+      <div v-show="item.isLoading" class="absolute left-0 top-0 h-full w-full flex-center bg-stone-2/75 dark:bg-stone-8/75">
+        <LineMdLoadingTwotoneLoop text="34px" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// iframe区动画
+.fade-enter-active,
+.slide-left-enter-active,
+.slide-right-enter-active,
+.slide-top-enter-active,
+.slide-bottom-enter-active {
+  transition: 0.4s;
+}
+
+.fade-leave-active,
+.slide-left-leave-active,
+.slide-right-leave-active,
+.slide-top-leave-active,
+.slide-bottom-leave-active {
+  transition: 0.3s;
+}
+
+.fade-enter-from {
+  opacity: 0;
+}
+
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-left-enter-from {
+  margin-left: 20px;
+  opacity: 0;
+}
+
+.slide-left-leave-to {
+  margin-left: -20px;
+  opacity: 0;
+}
+
+.slide-right-enter-from {
+  margin-left: -20px;
+  opacity: 0;
+}
+
+.slide-right-leave-to {
+  margin-left: 20px;
+  opacity: 0;
+}
+
+.slide-top-enter-from {
+  margin-top: 20px;
+  opacity: 0;
+}
+
+.slide-top-leave-to {
+  margin-top: -20px;
+  opacity: 0;
+}
+
+.slide-bottom-enter-from {
+  margin-top: -20px;
+  opacity: 0;
+}
+
+.slide-bottom-leave-to {
+  margin-top: 20px;
+  opacity: 0;
+}
+</style>